<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport"
          content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../Styles/base.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<p>About Face 4 :交互设计精髓</p>

<p>在的方向混乱，因为用户在导航时，窗格盖住了屏幕上之前的内容。但在当需要多个文档或者 一个文档的多个视图时，这种习惯用法适用于主工作区（例如在微软 Excel 中，参见图 12-1 )。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00349.jpg"/></p>

<p align="right" height="0pt" width="0pt"><font size="2">图</font> <font size="2">12-1</font> <font size="2">微软</font>
    <font size="2">Excel</font> <font size="2">中采用了标签窗格（在左下方可以看到），让用户在相关的工作表之间导航。</font> <font size="2">Excel</font>
    <font size="2">也用分割线画</font></p>

<p align="right" height="2pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font size="2">出相邻的窗格，让使用者来浏览单个工作表的多个部分，而无须不断滚动，这两种做法为</font>
    <font size="2">Excel</font> <font size="2">使用者减少了导航负担。</font></p>

<p><br/>
    <br/></p>

<p>一些开发者用选项卡将复杂的产品功能分为较小的几组，理由是，如果将功能切割成小块 , 使用起来会更容易。但把单一功能的几部分分别放到单独的窗格中也会增加了负担，而且使用 户不易理解，从而失去方向感。</p>

<p>使用选项卡能节省空间且有时必须使用选项卡才能把所需信息和功能放入有限的空间中 ( 设置对话框就是一个经典的例子。我们认为，不会有人喜欢在一个视图下看到一个复杂应用所
    有的设置项）。不过，在大多数情况下，使用选项卡也会导致严重的导航负担。一个简明的选项 卡很难准确地描述选项卡中的内容（不过，必要时选项卡上富视觉无模式反馈能帮上忙——参 见第 15
    章）。因此使用者常须单击每个选项卡才能找到要找的那条信息或者工具。</p>

<p>如果主工作区有多个不必同时使用的支持窗格，就可以采用选项卡窗格。支持窗格也可以 堆叠，用户一次单击即可选择适合其当前任务的窗格 <font size="2">。一</font> 个经典的例子就是 Adobe Illustrator
    中的颜色（ colormixer) 和色板（ swatchesarea) ，如图 12-2 所示。这两个工具都用来选择绘图 的颜色，且不能同时使用，用户通常知道哪个工具更符合当前工作的需要。</p>

<p>222<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 12 章减少工作消除负担</p>

<blockquote>
    <img align="baseline" alt="" height="163" src="../Images/Image00130.jpg" width="209"/>
</blockquote>
<blockquote>
    <img align="baseline" alt="" height="162" src="../Images/Image00108.jpg" width="209"/>
</blockquote>
<blockquote>
    <font size="2">图</font> 12-2 Adobe Illustrator <font size="2">中的调色板选项卡，用户可以在颜色和色板之间切换，选择颜色时可据情况选择</font>
</blockquote>
<blockquote>
    工具和菜单之间导航
</blockquote>
<p>另一种重要但被忽视的导航形式是因用户需要使用不同的工具、选项板和功能而产生的。 这些元素在窗格或者窗口内的空间组织，对于减少额外的鼠标移动非常重要。无关紧要的鼠标
    移动会让用户烦恼疲惫，严重时则会导致重复性压力损伤。经常使用的工具以及一起使用的工 具，应该在空间上组织在一起，随手即可访问。菜单则需用户花更多力气导航，因为在单击之
    前，看不到内容。经常使用的功能应该以工具栏、选项板及其等效方式来提供。菜单应该用来 放那些很少访问到的命令（本章稍后将再次讨论如何组织控件空间，第 18 章深入讨论工具栏)。</p>

<p><img align="baseline" alt="" height="333" src="../Images/Image00350.jpg" width="228"/></p>

<p>Adobe Photoshop 包含的一些行为让人讨厌，强迫用户在多个工具控件之间导航。例如颜料 桶 （Paint Bucket) 和渐变（ Gradient) 工具都占用了工具栏上同等位置，必须单击控件不放， 才能打开一个菜单，如图
    12-3 所示。但是，二者都是填充工具，如果二者都频繁使用，最好把 它们并排相邻摆放，避免因频繁的工具导航而打断工作流。</p>

<blockquote>
    <font size="2">图</font> 12-3 <font size="2">在</font> Adobe Photoshop <font size="2">中，颜料桶工具隐藏在工具栏的组合图标按钮（参见第</font>
    21 <font size="2">章）中。 尽管渐变工具和颜料桶工具都常访问，但需要时只能这样访问菜单。</font>
</blockquote>
<blockquote>
    信息的导航
</blockquote>
<blockquote>
    信息（或者窗格、窗口的内容）的导航有几种方式：滚动（平移）、链接（跳转 ) 、缩放。
</blockquote>
<blockquote>
    223<br/>
    <br/>
</blockquote>
<p>About Face 4 : 交互设计精 tt 前面两种方法很普遍。滚动在大多数软件中广泛应用；链接在 Web 中无广泛应用（不过非 Web 应用越来越多地采用链接）；缩放主要用于 3D 数据和详细的 2D 数据可视化。</p>

<p>滚动虽必要，但应尽可能地减少，并考虑在信息的分页和滚动之间找到平衡。设计师应该 了解用户的心理模型和工作流程以确定最合适的选择。</p>

<p>在 2D 可视化及绘图应用中，垂直和水平滚动很常见。此类界面因缩略图使导航更便捷。 本章的后面内容将讨论这种技术及其他视觉标志。</p>

<p>链接是 Web 的重要导航范式。但链接易引起视觉混乱，所以必须格外小心使用；可提供视 觉和文本的线索来帮助用户导航。</p>

<p>缩放和平移是浏览 2D 和 3D 信息的导航工具，适用于创建 2D 和 3D 绘图、模型，或者探 索真实世界 3D 环境（如结构演示或者地形图）。但查看超出二维的任意数据或抽象数据，就力 不从心了 <font
        size="2">。一</font> 些信息可视化工具使用逻辑而非空间缩放表示 “ 显示对象更多的属性细节”，随着 对象视图增大，属性（经常是文本）是叠加在图形上的。如果属性与空间数据密切相连，如谷歌
    地图使用的空间数据（参见图 124) ，这种技术最能发挥作用。但除了抽象的数据空间，这种交 互皆可用相邻窗格来更好地实现，相邻窗格能以更标准更易读的形式显示所选对象的属性。</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00129.jpg"/></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> <font size="2">124</font> <font size="2">谷歌地图应用充分利用了空间和逻辑缩放的组合。用户用手指滑动放大时，交通线路、交通拥堵、街道名称，
    以及商业地点等地点信息也出现在视野中缩放用在实物数据空间比抽象数据空间效果更好，如地图</font>
</blockquote>
<p>224<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 12 章减少工作消除负担</p>

<p>平移和缩放（尤其是一起使用时）会让用户产生更多导航困难。尽管由于在线地图和易于 理解的手势界面的普及，这些问题正在改善，但人们仍可能迷失在虚拟空间中。人们不习惯在 没有限制的 3D 空间中移动，而且当 3D 空间投射到 2D
    屏幕上时，人们更难感知 3D 空间（更 多有关 3D 操控的讨论见第 18 章）。</p>

<p><span id="filepos0001232515"></span></p>

<p>拟物化负担</p>

<p>我们正在经历一场难以置信的转变：从充斥着机械制品的工业时代走向数字化、信息化对 象的时代。人们已经习惯了前一时代的模式和形态，自然会尝试利用这些工具，以描述更加不
    确定的新时代。正如工业革命的历史所显示的，新科技的成果开始只能用此前的技术语言来描 述。例如，铁路机车曾名 “ 铁马 ” ，而汽车就是 “ 无马马车”。但这种比喻和语言歪曲了我们的 思维，且其程度之甚远超想象。</p>

<p>人们自然而然地倾向于在新的数字环境中使用旧的表达，这可称为拟物化。拟物化有时有 效，因为即便背后的技术不同，但功能是一样的。例如，把打字机打字的过程转换到计算机上
    处理文字时，可使用机械时代的方式处理同样的任务。打字机使用小小的金属制表键（ tab )来 快速移动托架，停留在特定列，此为 “ 制表 ” 或 “ 设定制表 ” ，是科技自然发展的结果。字处理
    软件也有制表键，功能相同。无论是处理卷在压纸卷筒上的纸，还是视频屏幕上的图像，都需 要快速移到特定的边距偏移位。</p>

<p>不过，很多时候机械时代的方法不应该照搬到数字世界中。把熟悉的机械制品带入软件中 时，就会遇到问题。这些呈现方式产生了负担，而且毫无必要地限制了交互，而新的交互方式 本可比旧模式更高效。</p>

<p>机械往往比数字产品更易手工执行。考虑一下简单的联系人列表。如果在屏幕上一模一样， 渲染一本装订起来的册子，使用起来就比实体地址簿复杂得多，更不方便、更难用。实体地址
    簿也按照姓氏的字母顺序存储姓名。但如果想按照某人的名字来查找怎么办？机械制品必须手 动一页一页浏览才行。但忠实拟物化的数字版也不能按照名字搜索，而且在计算机屏幕上失去
    了纸册提供的诸多细微真实的视觉线索（折角、手写笔记）。同时，滚动条、滑动删除以及导航 翻找，相比于简单的手翻纸页，也更难使用、更难视觉化、更难理解。</p>

<p>设计师如果盲目依赖拟物化隐喻，就把自己逼进了角落。摆有电话的桌面、复印机、订书 机和传真机，抽屉里有文件夹的档案柜这样的视觉隐喻，可以让人们容易理解界面元素与行为
    的关系。但在用户学会基本用法之后，管理这些隐喻则成了负担中的负担（更多关于视觉隐喻 的讨论请参见第 13 章）。</p>

<p>充满拟物化呈现方式的屏幕空间也很拥挤，尤其是对于独占姿态应用 （sovereign posture 225<br/>
    <br/></p>

<p>About Face 4 :交互设计精髓</p>

<p>application) 而言很重要。以前让我们对拨号如此着迷的电话，如今已成快速沟通的障碍。</p>

<p><img align="baseline" alt="" height="317" src="../Images/Image00222.jpg" width="180"/></p>

<p><img align="baseline" alt="" height="314" src="../Images/Image00028.jpg" width="181"/></p>

<p>设计师很容易以用户友好的名义陷入拟物化的陷阱。苹果 i 〇 S 的第 4 、 5 、 6 版严重拟物化 , 但似乎在 iOS7 中终于清理掉了，如图 12-5 所示。</p>

<p><font size="2">图</font> <font size="2">12-5</font> <font size="2">在</font> <font size="2">iOS 6 (</font> <font
        size="2">左）中，苹果大量使用拟物风格</font> <font size="2">.</font> <font size="2">但在</font> <font size="2">iOS 7 (</font>
    <font size="2">右）中似乎清理掉了。</font></p>

<p><span id="filepos0001238568"></span></p>

<p>模态负担</p>

<p>上一章介绍了流的概念。流指人们和谐地使用工具，进入了生产力极高的状态。流是一种 自然状态，人们无须敦促即可进入。进入流状态后需要花些力气打破。电话铃声响起会打断流 ,
    模态错误信息或确认对话框也会。某些中断不可避免，但毫无理由中断用户的流就是愚蠢地停 止进程，是一种最具破坏性的负担。</p>

<p><img align="baseline" alt="" height="58" src="../Images/Image00063.jpg" width="51"/></p>

<p>设计原则</p>

<p>不要愚蠢地打断进程。</p>

<p>设计拙劣的软件会做出任何有自尊的人都不会做的断言。例如，软件太蠢而没法在正确的 位置找到文件，冒称文件不存在，然后责备用户弄丢了文件！ 一个程序可能愉快地执行不可能
    的查询，挂掉系统，迫使用户重启。用户将这样的软件行为视为傻子也合情合理。</p>

<p>错误、通知和确认信息</p>

<p>错误消息和确认消息对话框这两种普遍的负担元素不仅无处不在，而且根除需要大量的工 作；第 15 章中将会详细讨论，现在需要指出它们产生的大量负担，尽可能从应用中清除。</p>

<p>典型的模态错误消息没必要出现，要么告诉用户不关心的东西，要么要求用户修复某种理</p>

<p>226<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 12 章减少工作消除负担</p>

<p><img align="baseline" alt="" height="163" src="../Images/Image00264.jpg" width="342"/></p>

<p>应由程序修复的情况。图 12-6 是 Adobe Illustrator 6 在用户想保存文档时显示的错误消息。我们 根本不知道它的目的，但看起来很可怕。</p>

<blockquote>
    <font size="2">图</font> 12 <font size="2">名这个丑陋无用的错误消息框撞自停止进度。我们不能核实或识别它想告诉我们什么。除了点击</font> “OK <font size="2">"按钮承认
    我们的过失之外，它也没有给我们其他响应选项。只有在保存文档时这个消息才出现，而我们委托它做的只是一些简单 而直观的事情。程序在没有帮助的情况下甚至无法保存一个文件，却不告诉我们它需要什么样的帮助！</font>
</blockquote>
<p>消息去中止一个已经很恼人的耗时过程，会使这个过程更漫长。用户告诉程序保存作品以 后，却不能去拿一杯咖啡，因为他返回时或许会发现功能没有被执行，程序不加选择而阻塞进 程。我们会在第 21 章中讨论如何消除这类错误消息。</p>

<p><img align="baseline" alt="" height="23" src="../Images/Image00269.jpg" width="225"/></p>

<p>图 12-7 展示了另外一个来自微软的 Outlook 的令人沮丧的例子。</p>

<p><font size="1">Rules Wizard</font></p>

<p>Rules ae^ted in this protle conflict with rules on the Microsoft Exchange Server. Only one set of rules can be Which
    rules do want to save?</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="23" src="../Images/Image00269.jpg"
                                                width="225"/></p>

<p><font size="2">图</font> 12-7 <font size="2">这是一个可怕的确认对话框，愚蠢地中止进程。如果程序足够聪明，能够监测到差异，为什么它自己不能改正</font></p>

<p><font size="2">错误呢？对话框提供的选项令人惊恐。它告诉我们可以引爆两个盒子中的一个：一个装着垃圾，而另一个装着家里的狗。</font></p>

<p><font size="2">但程序没有说应该是哪个。如果我们单击撤销按钮，这又意味着什么呢？它是否仍会炸死你家的狗？</font></p>

<p>这个对话框在没有提供任何信息，却要求我们做出不可逆转、可能代价高昂的决定！如 果对话框在你改变一些规则后出现，是否表示你想要保存更改？如果不这么做，你是否需要 多一点信息？比如说，哪些规则存在冲突，哪条最新 • ，单击 “ 取消 ”
    按钮时，我们也不知道 会发生什么。是否取消了对话框，规则就不匹配？是否因为放弃最新的更改而导致不匹配？ 这种糟糕的交互设计令用户产生的恐惧与不确定，毫无必要。我们将于第 21 章中讨论如何改 善这种情形。</p>

<p>让用户请求许可</p>

<p>在命令行和基于字符的菜单时代，界面通常间接为用户提供服务。如果想改变一个项目， 例如你的地址，必须先获得程序的许可后，程序显示一个屏幕，方可在此修改地址。请求许可 纯属负担，不幸的是，迄今事情也没有太大的改观。如果你想在
    Amazon.com 上改变已保存的</p>

<blockquote>
    227<br/>
    <br/>
</blockquote>
<p>About Face 4 : 交互设计精 fll 地址，必须先跳转至另一页面；但如果想改变显示的值，应该直接就能改，而非要到另外一个 地方请求许可。</p>

<blockquote>
    <font size="7">&nbsp; <sub>
        <small><font size="7"><font color="#000000">0</font></font></small>
    </sub></font>
</blockquote>
<blockquote>
    设计原则
</blockquote>
<blockquote>
    不要让用户请求许可。
</blockquote>
<p>正如上一个例子中，很多程序都有一处用于显示输出值（诸如文件名、数值及所选项），另 一处接收用户输入。完全复制实现模型把输入和输出当成不同的过程，然而用户的心理模型并 不区分这种差异， “
    这里有一个数字，我只要单击它就可以输入新的数值”。如果程序不能接受 这种想法，就毫无必要地在界面中插入了负担。如果用户可以修改选项，那么就能够在程序显 示选项的地方修改。</p>

<blockquote>
    <font size="7">&nbsp; <sub>
        <small><font size="7"><font color="#000000">0</font></font></small>
    </sub></font>
</blockquote>
<blockquote>
    设计原则
</blockquote>
<blockquote>
    任何输出之处应允许输入。
</blockquote>
<p>在某些环境下，请求许可的反面或许有用：不是让程序发出对话框，而是让用户告诉对话 框离开，不要再回来。这样一来，即使程序错误地认为自己对用户有帮助，用户也能让没用的 对话框停止骚扰自己。微软 Windows
    现在大量使用这种习惯用法。例如，如果新手无意中关闭 了对话框，不知道如何恢复，那么可以在一个显眼的地方找到一个很容易识别出来的安全习惯 用法，如标有 “ 恢复所有已关闭对话框 ” 的帮助菜单项。</p>

<p><span id="filepos0001250081"></span></p>

<p>样式负担</p>

<p>用户必须处理屏幕上的视觉信息，例如找到列表的一项，弄明白开始阅读的位置，或区分 哪些元素是可点击的，哪些仅仅是装饰。</p>

<p>视觉负担的一大来源是过度使用样式图形和界面元素（参见图 12-8 )。视觉样式可营造气 氛，强化品牌，但不应牺牲实用性和可用性，强迫用户理解视觉元素来区分控件重要信息和装
    饰。视觉样式，至少，在效率类而非娱乐类应用上，应该能够清晰传达信息和界面行为。</p>

<p>如何取得平衡，打造高效的视觉界面设计，会在第 17 章进一步讨论。</p>

<p>228<br/>
    <br/></p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p>第 12 章减少工作消除负担</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00256.jpg"/></p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 图12-8 Blue Bell Creameries的网站主页就是一个典型的视觉负担例子。文字高度样式化，没有遵循网格布局。用户
    很难区分装饰与导航元素。与这个网站交互时需要额外的视觉工作。不过.这并不一定是件坏事——适量的此类负担工 作有时是一种娱乐（比如游戏和拼图玩具）。</p>

<p><br/>
    <br/>
    <span id="filepos0001252258"></span></p>

<p><font size="6">负担取决于情景</font></p>

<p>在不同情景中，一个人（或人物模型）的目标导向任务可能就成了另一个人的负担任务。 一般来说若用户并非自愿而是被迫使用，那就是负担，比如窗口管理。确定像这样的一种功能
    或者动作是否属于负担的唯一方式是与人物模型的目标做比较。如果一个重要的人物模型必须 同时在屏幕上看到两个程序，才能比较或者传输信息，那么配置程序主窗口来让程序分享屏幕
    空间的功能就不是负担。如果人物模型没有这种具体的目标或者需求，则配置主窗口的工作就 是一种负担。</p>

<p align="right" height="6pt" width="0pt">软件姿态不同，负担也有变化。暂态应用程序 （transient posture application )的用户往往需</p>

<p>要某些指令才能有效地使用产品，所以为此分配一部分屏幕，显然并不像在独占式应用程序中 那样构成负担。暂态应用程序并不常用，所以用户需要更多帮助来理解程序的功能，记住如何</p>

<blockquote>
    229
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>控制程序。不过，对于独占式应用程序而言，哪怕只有一点点负担，也很烦人。</p>

<p>不过，某些类型的动作几乎始终是负担，不管在什么情况下，都应消灭，如多数原本应由 软件处理的（花点设计和工程周期的话）硬件管理任务，任何此类请求都应从用户界面上清除， 以后台安静运行的智能程序行为代之。</p>

<p><span id="filepos0001254802"></span></p>

<p><font size="6">消灭负担</font></p>

<p>导航负担是数字产品中最普遍的负担，也是入手点。有很多方法可以改善（消除、减少和 加快加速）应用软件、 Web 站点设备的导航，如以下所述就很有效，我们将在下面详细讨论。</p>

<blockquote>
    • 减少要去地方的数量。
</blockquote>
<blockquote>
    • 提供导航标志。
</blockquote>
<blockquote>
    • 提供概览。
</blockquote>
<blockquote>
    • 恰当地把控件映射到功能上。
</blockquote>
<blockquote>
    • 避免层级关系。
</blockquote>
<blockquote>
    • 不要复制机械时代的模型。
</blockquote>
<p><span id="filepos0001256712"></span></p>

<p>减少要去地方的数量</p>

<p>改善导航的最有效方法听起来显而易见：减少必需导航的地方数量，如包括模态、表格、 对话、页面、窗口和屏幕。如果模态、页面屏幕的数量减至最少，那么用户的方向感将显著提 升。对于前面提到的导航而言，这意味着做到如下几点：</p>

<blockquote>
    • 将页面和视图的数量减至最少。两三个视图全屏窗口对多数人最合适的；对话框，尤 其是非模态对话框，也应减至最少。如果程序、网站或应用有几十个不同类型的页面、 屏幕和表格，那么导航将很繁杂。
</blockquote>
<blockquote>
    • 尽量限制界面中相邻窗格的数量，能帮用户实现其目标即可。在独占式应用中， 3 个 窗格很好，但也非绝对。很多应用也需要更多窗格。在网页上，多于两个导航区域和 一个内容区域，页面将稍显紊乱。平板应用包含两个窗格比较典型。
</blockquote>
<blockquote>
    • 将控件的数目限制到最少，用户能达成其目标即可。通过人物模型了解用户，可远离 非用户所求且碍其使用的控件。
</blockquote>
<blockquote>
    • 尽可能减少滚动。同时给支持窗格足够空间显示信息，以避免经常滚屏。二维和三维 图表的默认视图和场景应让用户不必过多平移即可确定方向。缩放对于大多数用户来
</blockquote>
<p align="right" height="0pt" width="0pt">第 12 章减少工作消除负担</p>

<blockquote>
    说是最困难的导航类型（不过在移动应用上，用张合手势更直观），所以其使用应该由 用户自由决定，而不是必需的。
</blockquote>
<p>很多在线商店的导航让人迷惑，因为设计师试图用一个同样的网站服务每一个人。如果一 个用户常在线买图书，却从不购买音乐，因而此位用户的主屏幕就应该淡化网站的音乐部分，
    也留下了更多的空间用于买图书，导航也变得更简单；相应地，如果他经常访问账户首页就应 该醒目地显示账户按钮（或者标签）。</p>

<p><span id="filepos0001260125"></span></p>

<p>提供导航标志</p>

<p>除了减少导航地方的数量，还应提供更好的参考点，即导航标志（ Signposts ),增强用户的 定位能力。就像航海员参考海岸线或者星星来航行，用户参考界面上的持久对象 （Persistent objects) 来导航。</p>

<p>桌面世界里，持久对象都包括程序窗口。每个程序都可能有一个顶层主窗口。其窗口的显 著特征也可以认为是持久对象：菜单栏、工具栏、其他选项板或者状态栏和标尺。一般来说， 界面的每个窗口的独特外观也可以很快识别。</p>

<p>在 Web 中也有类似的规则。精心设计的 Web 可通过巧妙地利用持久对象使整个购物体验 过程保持稳定，尤其是页面顶端的导航栏，不仅提供了清晰的导航选项，而且其持久固定也能 够帮助用户定位方向（参见图 12-9 )。</p>

<p>硬件设备中类似规则也能适用于屏幕，不过硬件控件本身也可作为导航标志——能提供状 态视觉或触觉反馈的控件更是如此，如单选按钮在选中时亮灯为一例。即便是拨号盘针的位置， 如果与软件集成得当，也能提供导航信息。</p>

<p>有的程序主窗口的内容能轻易识别（尤其是信息亭和小屏幕设备），有的程序可能为数据提 供了一些不同的视图，而整体外观随之而变。但无论如何，桌面应用的不同外观来自于菜单、
    选项板和工具栏的独特组合，因此，菜单和工具栏导航也必须视为导航标志。大量导航标志只 要可见即可。不用说，如果删除了导航标志，它们就不能辅助导航了，所以最好使其永久固定 ( 有些 iOS
    应用打破了这条规则，用户向下滚动时允许控件卷上去：不过，只要用户稍微反方 向滚动，控件立刻出现。这样可使控件在需要时出现)。</p>

<p>让网站的每个页面长相类似，可以保持视觉连贯，但如果太相似也会引起混乱。你当然应 该在每个页面上统一使用共同元素，但让不同空间有变化可更好地帮助用户定位。</p>

<p align="right" height="4em" width="0pt">231</p>

<p><img align="baseline" alt="" height="54" src="../Images/Image00346.jpg" width="78"/></p>

<p><img align="baseline" alt="" height="50" src="../Images/Image00275.jpg" width="65"/></p>

<p><font size="1">-Oejjff»</font> <font size="2"><i>Wuhln</i></font> <font size="1">fUach</font> L OFFERS. From $99
    chjirs to bundled discounts to free thipp4nf offers.</p>

<p>SHOP AU COOL OFFERS »</p>

<p><font size="1">L</font> 〇〇 <font size="1">t</font> 〇 <font size="1">«9cr«McneB</font></p>

<p><font size="1">STACAtMOO</font></p>

<p><font size="1">•CMDOMPUMNCn</font></p>

<p>r CATEGORY</p>

<p><i>ncwn</i></p>

<p>□</p>

<p><font size="1">DINIMG BEDROOM OUTOOOR WORKSPACE STORAGE LIGHTING</font></p>

<p><font size="1">Storage | Shelving</font></p>

<p><font size="1">TMfttOI</font></p>

<p><font size="1">0«M|</font></p>

<blockquote>
    <i>mm mm wm</i>
</blockquote>

<p>■■ ■■ ■■</p>

<p>S2J95OOU0O S&amp;22500USO $1206 00USD</p>

<p><font size="2">图</font> 12-9 Design Within Reach <font size="2">网站在其多数网页中使用了很多持久区域，如上方的链接和搜索区域、侧面的浏览工具</font> . <font
        size="2">这些不仅帮助用户弄清楚可去之处，而且也使用户能有方向感。</font></p>

<p>菜单</p>

<p>桌面程序中最显著的持久对象是主窗口及其标题和菜单栏。菜单的部分好处来自其可靠一 致。程序菜单的意外变动会大幅度降低用户对软件的信任度，无论是菜单项还是单独的菜单。</p>

<p>工具栏</p>

<p>如果程序有工具栏，那么也应将其视为导航标志，因为工具栏是给中级用户使用的习惯 用法，而不是为初级用户准备的，因此改变菜单项所带来的问题不适用于工具栏控件。对于
    同样是持久对象而言，删除工具栏当然会打乱秩序。虽然允许，但也不应随意提供。应该防 止用户偶然触发这种改变。有些程序在工具栏上放会让工具栏消失的控件！这完全不适合弹 射座椅控制杆。</p>

<p>其他界面标志</p>

<p>工具选项板和屏幕上用于显示或编辑数据的固定区域也应该看作持久对象，因其可简化界 面导航。审慎使用空白与易读字体，使标志保持清晰独特。</p>

<p>232</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <span id="filepos0001268049"></span></p>

<p>提供概览</p>

<p>概览在界面中与导航标志类似：帮助用户定位。不同的是，概览帮助用户定位内容，而不 是在应用中。因此，概览区域本身应该是持久的，其内容应该取决于正在被浏览的数据。</p>

<p>概览可以是图形，也可以是文本，这取决于内容的性质。图形概览的一个绝佳例子是 Adobe Photoshop 中的图形概览，即导览选项板（ navigatorpalette) ，如图 12-10 所示。</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00059.jpg"/></p>

<p>图12-10左边Adobe在Photoshop中充分利用了概览的极佳习惯用法：导览选项板在一个框里提供大图像的缩略图， 而轮廓框代表在主要显示中当前可见的图像部分。这个选项板不仅提供了导航背景，而且也可以对主显示进行平移和缩
    放；右侧Google在财经图表工具中，下面的小图像不仅是全局大图，而且还是上面放大区域的上下文。</p>

<p><br/>
    <br/></p>

<p>在 Web 世界里，最常见的概览形式是文本：无处不在的 “ 面包渣 ”（bread crumb) 导航（见 图 12-11) 。大多数 “ 面包渣 ” 提供了导航帮助和导航控件：不仅显示用户于数据结构之中的位
    置，而且以链接的形式，允许用户移动到不同节点。不过，随着网站由层级结构转向关联结构， 这种习惯用法有所减少。</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00067.jpg"/></p>

<p align="right" height="0pt" width="0pt">图12-11 Amazon.com上典型的“面包渣”。用户可以看到其所在的位置，可以点击路径中的任意节点导航至他处。</p>

<p><br/>
    <br/></p>

<p>最后一个有关概览工具的有趣例子是注释滚动条 （annotated scrollbar), 对文本滚动最有用。 这种滚动条巧妙使用文本信息的线性排列来显示位置信息，标出格式化或者非格式化文本选择
    的位置、高亮，以及其他很多可能属性。当拖动滚动条时，这些项目的位置提示信息就会显现。</p>

<p align="right" height="1em" width="0pt">233</p>

<p>处于注释时，可以看到文本的注释特性。微软 Word 使用了注释滚动条的变体。滚屏时，在工 具提示中显示页码和距离最近的标题，工具提示在滚动时一直显示，如图 12-12 所示。</p>

<blockquote>
    <img align="baseline" alt="" height="138" src="../Images/Image00036.jpg" width="130"/>
</blockquote>
<blockquote>
    <font size="2"><i>desire</i></font> and its importance in the design of communications 1 products. Thcy^rc not
    wrong, but wc feel that in placing <font size="2"><i>ih</i></font> emphasis on a single (albeit, comolex) emotion,
    thev y sennetimes be seeing only pat Page: 8
</blockquote>
<blockquote>
    Desire is a naftow emotion Behavioral and interface-tevel iigaing a product that serves a purpose, especially when t
    product is located in an enterprise, or its purpose is ^ily technical or ^&gt;ecialized. One would hardly wish to
    <font size="2">图</font> 12-12 <font size="2">微软</font> Word2010 <font size="2">软件中的一个注释滚动条，用户在文档中导航时，注释滚动条提供有用的上下文信息。</font>
</blockquote>
<p><span id="filepos0001273397"></span></p>

<p>恰当地把控件映射到功能上</p>

<p>映射（ mapping) 描述了控件、它所影响的事物以及预期结果之间的关系。如果控件所影响 的对象无法在视觉、空间和符号上产生关联，那么就是糟糕的映射。控件到功能的糟糕映射增 加了用户的认知负担，可能潜在导致严重的用户错误。</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00011.jpg"/></p>

<p>唐纳德 • 诺曼提在《设计心理学》中举了一个非数字世界中映射的绝佳例子。任何会做饭 的人在用燃气灶时都遇到过这样的麻烦：燃气头旋钮没有恰当映射到其控制的燃气头上。典型 的燃气灶（例如如图 12-13 所示）有 4
    个燃气头，每个燃气头占用正方形的一角。不过，控制 燃气头的旋钮却在前边的面板上排成一条直线。</p>

<blockquote>
    <font size="2">图</font> 12-13 <font size="2">燃气灶控件的糟糕映射。最左边的旋钮控制的是左前燃气头还是左后燃气头？用户每次使用燃气灶时，都得 弄清楚映射关系。</font>
</blockquote>
<p>在这个例子中，这是一个物理映射问题。使用控件的结果显而易见：当你旋转一个旋钮时 , 会点燃一个燃气头。不过，控件的目标 —— 即哪个燃气头会点着一 ~ 并不清楚。旋转最左边的
    旋钮点着的是左前方的燃气头，还是左后方燃气头？用户必须通过试验或者参考旋钮下的图</p>

<p align="right" height="0pt" width="0pt">第 12 章减少工作消除负担</p>

<p>标来确定，这种不自然迫使用户在每次使用时都不得不重新确定映射关系。虽然随着时间推 移，这种认知工作可能变成习惯；但它仍然存在，可能会导致用户在匆忙或者注意力不集中
    时（人们准备饭菜通常会这样）出错。最好的情况下，用户因为拧错了旋钮而感到自己很愚 蠢，直到用户意识到自己的错误才发现食物没有加热。最糟糕的情况下，可能会不小心烧到 自己，或者点着厨房。</p>

<p>解决方案是调整旋钮的位置，让它们更好地映射所控制的燃气头。旋钮虽不必按照燃气头 放置，但其位置应该清晰指向对应的燃气灶。图 12-14 中的燃气灶是一种有效的控件映射。</p>

<p><font size="7">回</font></p>

<p><i>m</i></p>

<p><font size="7">図</font></p>

<p>0 0 <i>0 0</i></p>

<blockquote>
    <font size="2">图</font> 12-14 <font size="2">清晰的空间映射。这个燃气灶上，旋钮和燃气头的映射关系非常清晰，因为旋钮的空间布局已将旋钮与燃气 头清晰地联系起来。</font>
</blockquote>
<p>在这种布局中，很清楚，左上的旋钮控制着左上的燃气头。每个旋钮的位置都在视觉上清 晰表明会打开的燃气头。诺曼把这种更符合直觉的布局称为 “ 自然映射”。</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00210.jpg"/></p>

<p>图 12-15 展示了另一种糟糕映射的例子。在这种情况下，概念到动作的逻辑映射 （logical mapping) 不清晰。</p>

<p><font size="2"><font color="#FFFFFF">Re-sort results by:</font></font></p>

<p><font size="2">图</font> 12-15 <font size="2">逻辑映射问题的例子。如果用户想首先看到最近的项目，他是选择升序排列，还是降序排列呢？这些术语没 有很好地映射用户对时间的认知。</font>
</p>

<p height="0pt" width="0pt"><font size="5">I CP</font></p>

<blockquote>
    <font size="2">1932 FORD ROADSTER, High Boy Roadster, Fly</font>
</blockquote>
<p align="right" height="2em" width="0pt">235</p>

<p><img align="baseline" alt="" height="71" src="../Images/Image00158.jpg" width="179"/></p>

<p><img align="baseline" alt="" height="70" src="../Images/Image00062.jpg" width="170"/></p>

<p>层级关系是程序员最常用的工具。程序中大部分数据，以及操作这些数据的代码，都是以 层级关系存在的。因此，很多程序员在界面中展现层级关系（实现模型），如早期的菜单就是层
    级关系。但是用户很难用抽象层次来成功导航，除非层级基于用户的心理模型且分类完全互斥。 程序员难以理解这一点，因为他们早已习惯了。</p>

<p>About Face 4 : 交互设计精 IS</p>

<p>这个网站使用一对下拉菜单按日期对搜索结果排序。第 1 个下拉菜单的选择决定了第 2 个 下拉菜单提供的选择。在第 1 个菜单中，选择 “ 结果重排序：按放置时间 ” 时，第 2 个下拉菜 单显示升序和降序选项。</p>

<p>不像前面的映射糟糕的燃气灶旋钮，这里控件的目标非常清晰，下拉菜单会影响下面显示 的列表。不过，问题在于结果：如果用户选择升序，会得到什么样的排序呢？</p>

<p>用户搞不清楚这些用来表达日期排序的术语，如果想在列表中先看到最近的项目，应该选 择哪个。升序和降序没有映射到用户的时间心理模型。人们不是用升序降序的方式看待时间，
    而是按时间和事件最近和最早的方式思考。修正该问题的一个快速方法是将选项说明改为“最 近优先 ” 和 “ 最早优先 ” ，如图 12-16 所示。</p>

<p>Date Placed</p>

<p height="0pt" width="0pt"><font size="5">I</font></p>

<p><font size="2">flkl.</font> 〇 <font size="2">Add to Saved</font> 細。</p>

<p><font size="2">1932 FORD ROADSTER, High Boy Roadster, Fly</font></p>

<p><font size="2">Ascending</font></p>

<p><font size="2">Most recent first Oldest first</font></p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="70" src="../Images/Image00062.jpg"
                                                width="170"/></p>

<p>Houston, TX</p>

<p><font size="2">图</font> 12-16 <font size="2">清晰的逻辑映射</font> . <font size="2">，</font> “ <font size="2">最近</font> ”
    <font size="2">和</font> “ <font size="2">最早</font> ” <font size="2">可以轻易映射基于时间的排序。</font></p>

<p>无论是设计家电、桌面应用还是网站，产品都可能存在映射问题。关注细节会有回报。即 使没有多少时间做出改变，只要找出并解决映射问题，就能显著改善产品，令产品更容易理解 , 用起来更愉快。</p>

<p><span id="filepos0001284753"></span></p>

<p>避免层级关系</p>

<p>大多数人对业务关系和家庭关系中的层级非常熟悉，但是在存储或者检索任意信息中，层 级关系对很多人来说并不是那么自然。大多数机械存储系统很简单，要么由对象（如书架）按
    单一序列组成，要么由一系列序列组成，都只有一层深（就像文件柜）。这种把事物以单层分组 的方法非常普遍，在家里，在办公室，处处可见。这种方法从来不会超过一个嵌套层次，我们 把这种存储范式称为 “ 单层分组 ”（monocline
    grouping )。</p>

<p>程序员习惯于这样的嵌套系统，一个对象的实例存储在同一对象的另一实例中，但大多数</p>

<p align="right" height="0pt" width="0pt">第 12 章减少工作消除负担</p>

<p>其他人难以理解。机械世界里，复杂的存储系统必须在每层使用不同的形式，如文件柜不会看 到文件夹套文件夹，文件抽屉套文件抽屉。即使在文件柜中放抽屉，抽屉里放文件夹这样不熟
    悉的嵌套，也很少超过两个层次。当前多数窗口系统采用的桌面隐喻中，可以在文件夹中无限 制嵌套文件夹。无怪乎大多数计算机新手初次遇到时会感到困惑。</p>

<p>多数人按照文件的某些共有特征，将其文件（及其他项目）一叠叠或者一摞摞地存放起来。 A 文件放在这里， M 项目的文件放在那里，个人资料放在抽屉里。唐纳德 • 诺曼称之为“堆叠 橱柜 " （ pilecabinet)
    。只有在计算机中，人们才会将 M 项目的文档放在活跃客户文件夹中，而 活跃客户文件夹又会存储在客户文件夹里，客户文件夹又存储在业务文件夹内。</p>

<p>计算机科学使我们可以利用层级结构来解决如何管理大量数据这一现实问题。但在呈现给 用户的实现模型（见第 1 章 ) ，使人困惑不解，与用户有关存储的心理模型冲突。单层分组是用
    户通常带入软件中的心理模型并几乎主导计算机以外的世界。若违背，后果自负。</p>

<p>单层分组系统不适用于物理管理计算机中常见的大量数据，但适用于呈现模型。这个难题 的解决方法是，用户怎么设想，就怎么提供结构；如采用单层分组，但提供只有深层组织结构
    才有的搜索和访问工具。换句话说，与其强迫用户在复杂的深层树状结构中导航，不如给他们 工具，让用户自己找出来所要的东西。我们将在第 14 章中讨论如何实现这种设计方案。</p>

<p><span id="filepos0001288693"></span></p>

<p><u>不要</u> 复制 <u>机械时代的模</u> 型</p>

<p>如前所述，拟物化负担源于在数字界面中原原本本地复制机械时代的动作，因此给导航以 及其他方面添加了负担。</p>

<p>值得花点时间重新思考从数字化之前的时代转换产品和特性的事情。新的数字化版本怎么 才能改进、修改，充分利用数字化环境？怎么才能消灭负担，智能起来？</p>

<p>以日历为例。在非数字化世界里，日历由纸张制成，通常一月一页。这是根据纸张、文件 夹、公文包和抽屉大小做出的合理折中。</p>

<p>很多软件中都有日历，而且几乎都是一次显示一个月份。即便可以像 Outlook 那样一次显 示不止一个月份，也总是每月一块，离散地显示日期。为什么？</p>

<p>纸质日历每次显示一个月的日期，因为受制于纸张大小，而且以一个月为分割点很方便。 高分辨率的数字显示器不受此限制，但大多数设计师完全复制，如图 12-17 所示。</p>

<p>在交互屏幕上，日历很容易成为日期、星期月份的连续序列，如图 12-18 所示。如果星期 是连续的，而不是按月份打断，那么 7 月 29 日到 8 月 4 日之间的时间会更容易安排。</p>

<blockquote>
    237<br/>
    <br/>
</blockquote>
<p>About Face 4 : 交互设 if^Si</p>

<p align="center" height="2em" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00244.jpg"/></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 12-17 <font size="2">人们对这些日历再熟悉不过了，使得日历的设计很少考虑这是在屏幕上展示的数字版。日历为了适应堆叠的
    纸张而没有考虑数字交互。你会如何重新设计数字日历吗？日历哪里有古老的机械时代制品的痕迹？</font>
</blockquote>
<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00235.jpg"/></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 12-18 <font size="2">多数计算机用户，非常熟悉滚动，那为什么不用它替代翻页？这种日历能做任何旧式日历做的事情，还解决
    了翻页中跨月安排时间的问题。不要习惯性地把过去的限制带到新平台上。你还能想到什么改进？</font>
</blockquote>
<p>238<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 12 章减少工作消除负担</p>

<p>同样，数字化日历的网格是固定的。为什么日期或星期栏的高度不能像电子表格那样可调 整呢？你肯定想调整周末栏的大小，以表明周末比工作日重要；如果你是一名商人，工作周会 比假期要求更多的日历空间。这种可调整的习惯用法众所周知 ——
    所有电子表格都这样，但机 械时代的日历表现形式的根深蒂固，使得很少看到哪款应用有改进。</p>

<p>图 12-17 的设计师可能认为，日历应该像教规一样，不容许改动。出人意料的是，多数时 间管理软件内部以连续的方式处理时间（实现模型），仅在用户界面（呈现模型）才渲染成离散 月份！</p>

<p>有人可能辩称，一页一月的日历更好，因为容易识别，用户熟悉。不过，新的数字模型并 非与旧式纸张模型毫无相似之处，只不过能允许用户做些以前不容易的事情，如跨月安排时间。 即便做了重大改进，也不会让人觉得难以适应。</p>

<p><img align="baseline" alt="" height="70" src="../Images/Image00121.jpg" width="54"/></p>

<p><img align="baseline" alt="" height="33" src="../Images/Image00282.jpg" width="30"/></p>

<p>苹果重新设计的 i 〇 S 7 日历却搞砸了 。iOS 7 日历以月度视图连续垂直滚动，但设计师却在 每月之间加了一条分行，也不支持拖动指定多日事件。貌合神离。</p>

<p>设计原则</p>

<p align="right" height="5pt" width="0pt">重大改变必须显著优秀。</p>

<p>移动设备和桌面上的纸式日历默默见证着机械时代的思维如何影响我们的设计。如果不分 析用户目标来做产品，软件就会充满负担，停留在机械时代。更好的软件是建立在信息时代的 思维方式之上的。</p>

<p><span id="filepos0001296290"></span></p>

<p><font size="6">常见的负担陷阱</font></p>

<p>你应该警惕地发现并清除界面上任何小负担。对于用户来说，无数没有必要的额外负担会 构成大量额外工作。下面的列表可以帮助你找到它们：</p>

<p>• 不要强迫用户到另外一个窗口去完成与本窗口相关的功能。</p>

<p>• 不要强迫用户记住事物在层级文件系统中的位置。</p>

<p>• 不要强迫用户调整窗口大小。当子窗口在屏幕上弹出时，程序应该为内容调整合适大 小。不要大而空，或者太小而需要不停地滚动。</p>

<p>• 不要强迫用户移动窗口。如果桌面上有空间，就应放在那里，而不是堆加在打开程序上。</p>

<p>• 不要强迫用户重新设置。如果用户已设置字符、颜色、缩进、声音，确保用户不需要 重做 —— 除非需改变。</p>

<blockquote>
    239<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<blockquote>
    • 用户在填充字段时需能有任意完整度。如果用户想忽略一些细节，不要强迫用户输入 , 假定用户有充足理由不输入。多数情况下，数据库的完整性不值得骚扰用户。
</blockquote>
<blockquote>
    • 不要强迫用户请求许可，比如输出时不允许输入这一问题。
</blockquote>
<blockquote>
    • 不要让用户确认其动作，这需要具有强大的撤销机制。
</blockquote>
<blockquote>
    • 不要让用户的行为产生错误。
</blockquote>
<p>负担是数字产品中可用性和用户满意度最常见也是最恶劣的障碍。不要让它在你的设计或 应用程序中抬起丑陋的脑袋！</p>

<p>240<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt"><font size="7">隐喻、习惯用法及能供性</font></p>

<blockquote>
    本书第一版出版时，界面设计师常常谈论如何找到合适的视觉隐喻和行为 隐喻，以此为基础设计界面。苹果推出麦金塔（ Macintosh) 之后的一二十年， 人们普遍认为，在界面上堆满类似于现实世界的对象用户就能轻松学习。结果，
    设计师创造的界面像办公室一样，有桌子、文件柜、电话机、地址簿；或一叠 纸，或带着符号和建筑的街道。
</blockquote>
<blockquote>
    随着 Android、Windows Phone 和 iOS 的降临，我们正式进入了交互设计的
</blockquote>
<blockquote>
    后隐喻时代。早期桌面软件和手持设备的拟物化（skeuomorphism )和过度雕琢 的视觉隐喻已成过去。现代设备的用户界面（ UI)( 以及越来越多的桌面 UI) 以内容和数据为中心，把 UI 控件的认知度降至最低。
</blockquote>
<blockquote>
    这种脱离隐喻之势姗姗来迟，如此有充足的理由：严格奉行隐喻设计毫无 必要，却把界面死死地与物理世界的运行机制捆绑在一起。数字产品最美妙的 一点是，展现给用户的工作模型不必受制于机械的物理限制，或虽受制于机械 系统的笨拙，也不必把 3D
    现实世界物体映射到 2D 的控件界面。
</blockquote>
<blockquote>
    基于隐喻设计的用户界面还有一大堆其他问题，如没有足够多的隐喻、缩 放效果不好、用户能否识别出隐喻有待商榷，特别是在跨文化时。隐喻，尤其 是物理隐喻和空间隐喻，在设计大多数数字产品时作用不大。本章我们将讨论
    放弃隐喻设计的原因，以及替代隐喻设计的现代方法。
</blockquote>
<blockquote>
    241<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精傾</p>

<p><span id="filepos0001304626"></span></p>

<p><font size="6">界面范式</font></p>

<p>用户界面的概念和可视化设计中主要有 3 类范式 （paradigm ):实现中心范式 (implementation-centric) 、隐喻范式（ metaphoric) 、习惯用法范式（ idiomatic
    )。实现中心的界</p>

<p>面基于对事物工作原理的理解，这本身十分艰巨。隐喻界面基于对事物工作原理的直觉 (intuiting) 理解，这是有风险的。而采用习惯用法的界面，则基于人们学习（ learning )如何实 现目标的过程，自然且人性化。</p>

<p>交互设计经历了几次转变：从技术（实现）中心到隐喻中心，再到近来的重视习惯用法。 尽管三类界面范式皆有使用，但计算机、电话、平板电脑及其他设备上常用的信息中心的现代 界面设计仍以习惯用法范式为主。</p>

<p><span id="filepos0001306287"></span></p>

<p>实现中心范式界面</p>

<p>实现中心范式用户界面仍应用广泛，尤其是在企业、医疗和科学软件中。实现中心的软件 向我们展示软件流程，赋予每种功能一个按钮，每个代码模块对应一个对话框，命令和流程精
    确反映内部的数据结构和算法。人们必须首先学习软件内部如何运行，才能成功地理解并使用 界面，这意味着用户界面完全建立在实现模型上。</p>

<p>显然这样最容易构建，开发者每写一个功能后贴一块用户界面测试，若如果有些地方工作 不正常，也比较容易排查故障。此外，工程师喜欢了解事物的运行方式，所以此种设计让他们
    心满意足。工程师喜欢看到虚拟的齿轮、控制杆和阀门，因为这可以帮助他们理解机器内部的 工作方式。但这些伪制品（ artifact) 对用户而言，毫无必要且复杂化。工程师也许希望了解内
    部，但多数用户要么没时间、要么不想了解这些东西。用户并不想知识渊博，只想成功使用产 品，对于这一点工程师却很难理解。</p>

<blockquote>
    <font size="7">&nbsp; <sub>
        <small><font size="7"><font color="#000000">0</font></font></small>
    </sub></font>
</blockquote>
<blockquote>
    设计原则
</blockquote>
<blockquote align="center" height="0pt" width="0pt">
    多数人并不想知道得太多，只想成功地使用产品。
</blockquote>

<p>实现中心界面的近亲性值得一提， “ 组织结构中心 ” （ org-chart-centric), 这很常见：某个产 品，或者某个网站，不是依用户考虑信息的方式来组织，而是按照公司或者组织的部门拥有的
    用户信息来设计的。这样的网站上，每个企业部门通常有一个标签页或者区，且缺乏一致，也 没有统一的设计。与实现为中心的产品界面类似，以组织结构图为中心的网站要求用户了解该
    企业的组织结构，才能找到他们感兴趣的信息，而用户对组织结构却不感兴趣。</p>

<p>242<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 13 章隐喻、习惯用法及能供性</p>

<p><span id="filepos0001309604"></span></p>

<p>隐喻范式界面</p>

<p>隐喻范式界面 （metaphoric interfaces )依赖于用户用在真实世界的实际经验在界面上建立 视觉与功能之间的联系。由于不必了解软件的运行机制，所以隐喻范式界面与实现中心范式界
    面相比是一大进步。不过曾在一段时间里，高度隐喻范式界面的力量和效用被夸大了。</p>

<p>当我们在用户界面和交互设计的情境中谈论隐喻时，我们真正指的是能表现某个功能的视 觉隐喻：一张可以代表事物目的和特征的图片，而用户可以明白其中含义。因此，隐喻要假设
    人们能够理解事物，可以小至工具栏按钮上的小图标，大到某些程序的整个屏幕：比如一对剪刀 表示 “ 剪切 ” ，或者 Quicken 软件（译者注： Quicken 是一款个人理财软件）中的全尺寸支票簿。</p>

<p>直觉、本能与学习</p>

<p>在计算机行业，尤其是在用户界面设计社区，直觉（ intuitive) — 词常表示“易于使用或易 于理解 ” 。这个词与隐喻界面密切相关。</p>

<p>我们直觉上理解隐喻，但这到底意味着什么？《韦氏大辞典》这样定义：</p>

<p>Intuition 名词 1: 敏锐的洞察力 2 a: 立即的理解或认知 b: 凭直觉获得的知识或信 念c:无须明显地理性思考和推理直接获得知识和感觉的能力。</p>

<p>这个定义并未指出我们是如何通过直觉理解事物的。在现实中， “ 直觉”没有什么魔法使事 物易于使用。不过，人们能理解某些界面，却理解不了另外一些界面，是有原因的。</p>

<p>即便此前没有有意识地学习，某些特定的声音、气味图像也能引起我们的反应。小孩面对 一只生气的狗时，即使之前没经过任何学习，也本能地明白露出的牙齿意味着危险。本能是内 在的反应，不需要有意识地进行思考。</p>

<p>人机交互时的本能例子包括：屏幕上图像出人意料的变化会让我们受惊；网页上闪动的广 告会吸引我们的眼睛；我们对计算机突然发出的噪音或游戏机手柄颤动会有反应。</p>

<p>直觉不同于本能。直觉通过推理（ inference) 起作用，我们在完全不同的对象之间建立联 系，从相同点学习，但不会被差异分散注意力。我们理解界面隐喻元素的含义，因为心理上把 它们与我们之前学习过的东西联系起来。</p>

<p align="right" height="6pt" width="0pt">例如，人们可以明白如何使用废纸篓，因为曾经学习过如何使用真正的废纸篓，从而让大脑
    来为数年后建立关系做好准备。人们并未用直觉去理解如何使用最初的废纸篓。这很容易学习。</p>

<p align="right" height="6pt" width="0pt">隐喻界面有效利用了人脑强大的推理能力，但因为这种方法依赖于用户的特殊思维，所以
    人们可能因没有建立这种联系所需的语言、学习经历或者推理能力而失效。另外，界面设计的</p>

<blockquote>
    243<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精 n</p>

<p>隐喻方式存在其他严重问题，我们很快就会提到。</p>

<p>全局隐喻的暴政</p>

<p>隐喻最大的问题是，把界面与机械时代的制品绑在一起。一个极端例子是用于手持通信器 的操作系统 Magic Cap 。该操作系统由 General Magic 公司推出，由麦金塔软件专家安迪•赫茨 菲尔德 （Andy Hertsfeld)
    和比尔 • 阿特金森 （Bill Atkinson) 创建 。Magic Cap 的总体概念超前 于那个时代，有着非常易用的触屏键盘和地址簿，比 iPhone 早了近 15 年。</p>

<p>不幸的是 ，Magic Cap 的界面在方方面面几乎都依赖隐喻。从桌面的收件箱或者笔记本访 问信息；（虚拟地）走在过道上，两边排列着代表下一级功能的门；走出来去访问第三方服务 , 大街上的建筑就代表第三方服务（参见图 13-1);
    进入一栋建筑配置服务，等等。</p>

<p><font size="2">© Downtown</font> Sunday, November 17 <font size="2">8：19 pm.</font> <font size="2">Hallway</font></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00127.jpg"/></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> <font size="2">13-1 20</font> <font size="2">世纪</font> <font size="2">90</font> <font
        size="2">年代，用在索尼和摩托罗拉的产品中的</font> <font size="2">General Magic</font> <font size="2">的</font> <font size="2">Magic
    Cap</font> <font size="2">界面是隐喻的杰作。界面中 的所有导航，以及多数其他界面，皆保持了空间和物理上的映射。设计可能很有趣，但如果用户进入中级水平，就不太
    方便了。这很可惜，因为某些低层、非隐喻性的数据输入交互尽管设计精良，但非常复杂，远超那个时代。</font>
</blockquote>
<p>严重依赖此类隐喻意味着，用户虽可以直接理解软件的基本功能，在此功能以后，隐喻就 大大增加导航成本。用户必须回到街道上才能配置另一项服务，沿着街道往前走进游戏室才能 玩 Solitaire
    。这在现实世界中可能很正常，但在软件里没有道理了。为什么不抛弃这些盲目的 隐喻，让用户能够便捷地访问各种功能？后来 General Cap 幵发人员打造了一个书签快捷工具， 以为权宜之计，但此举微不足道，也太迟。</p>

<p>General Magic 的界面依赖于所谓的 “ 全局隐喻 ”（global metaphor), — 种单一、完全的隐喻 , 可为系统中的其他隐喻提供框架。用在电子游戏中可能不错，但用在以效率为主的地方则不太好。</p>

<p align="right" height="5pt" width="0pt">全局隐喻的潜在问题是，因为认为其他底层隐喻一致可助于通过联想来认知而难以拒绝地
    把隐喻延伸到简单的功能认知之外：电话软件也像桌子上的电话机一样，可以用按钮拨号；存</p>

<p>244<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 13 章隐喻、习愦用法及能供性</p>

<p>储电话号码的地址簿软件就像我们口袋或钱包里的地址簿一样。摆脱这种局限，摆脱工业时代 的技术，发挥计算机的真实力量，不是更好吗？为什么通信软件不能发起多重连接，抑或是按 照组织和附属机构来连接，以及直接隐藏电话号码？</p>

<p>如果亚历山大 • 格雷厄姆 • 贝尔 （Alexander Graham Bell )能创造出指向照片就能打电话 的电话机，肯定异常兴奋，但因为电子电路和电木（ bakelite) 制模，他没能做到。如今我们能
    够用任何喜欢的方式渲染通信界面，显示友人的照片也完全合理。 iPhone 之类的现代电话正是 这样做的。</p>

<p>隐喻延伸问题的另一个例子就是文件系统及文件夹隐喻。作为组织文件的机制，文件系统 易学易懂，因为与文件柜里的物理文件夹很相似；但也因为这样，正如多数隐喻式用户界面一
    样，文件系统和现实世界的类似物之别可能给用户造成认知问题。例如，在纸张的世界中，没 有人会把文件藏 10 层深，让计算机新手很难理解操作系统的导航结构。</p>

<p><img align="baseline" alt="" height="72" src="../Images/Image00178.jpg" width="56"/></p>

<p>实现这种机制也有局限。在纸张世界，不可能把一个文件放在档案柜的不同位置。结果， 文件存档是按照单一方式执行的（例如按名称字母顺序或者按账号号码的数字排序)。数字产品
    天生不受这种限制，但盲从于界面隐喻将严重限制人们按照多种组织方案存档单个文档。</p>

<p>设计原则</p>

<p>不要让界面强行适应隐喻。</p>

<p>正如布伦达 • 劳雷尔 （Brenda Laurel) 在《计算机影院》中所言：“界面隐喻就像鲁布戈德 堡机械 ^ (Rube Goldberg machine) — 样轰隆隆地往前走，坏了就修修补补接起来，裹了一层又
    一层补丁，人们已经无法理解，或无法辨认其所指的事物。”在从施乐帕克走出来的种种错误观 点中，对全局隐喻的向往可能最让人无力、最令人遗憾。</p>

<p>隐喻的其他局限</p>

<p>当应用到现代信息时代的系统中时，隐喻存在很多局限。首先，隐喻不易调整，即使在一 个简单程序的简单过程中，随着程序的规模和复杂性的增加可能会失效。当计算机使用软盘或 20 MB
    的硬盘，只有几百个文件时，用大号桌面文件图标作为访问和操控文件的方式很好；但是 在硬盘容量达到 TB 级别，文件成千上万后，以文件图标来移动文件就太笨拙，效率不高。</p>

<p align="right" height="6pt" width="0pt">其次，尽管为打印机和文件之类的实物找到视觉隐喻很容易，但为进程、关系、服务、变
    体找到隐喻却很难，而这些抽象概念在软件中却频繁使用。为改变频道、购买物品、找到参考、</p>

<p>①译者注：一种被设计得过度复杂的机械组合，以迂回曲折的方法去完成一些其实非常简单的工作。</p>

<blockquote>
    245<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>设置格式、改变图片分辨率或执行统计分析找到可用的视觉隐喻就更令人却步了，但这些操作 却是我们使用软件执行最频繁的功能。</p>

<p>隐喻依赖于设计者与用户有着相似的联想。如果用户没有和设计者相似的文化背景，就容 易导致隐喻失败；但即使文化背景相同或相似，也可能产生明显误解。例如，航班应用上的飞 机图片是表示 “ 查看飞机到达信息 ” 还是 “ 预订机票 ”
    呢？</p>

<p>最后，虽然隐喻有益于新手理解，但当他们晋升之后，成本就高了。大多数隐喻通过反映 物理世界的机制紧紧地把我们的理念和物理世界束缚在一起，永远限制了软件的能力。因此，
    按照习惯来设计很好，而只在真正合适、强大的隐喻正中下怀时才使用隐喻会更好。</p>

<p>例外</p>

<p>一般来说，尽管应该避免使用隐喻和拟物化用户界面，但总有例外情况。电子游戏经常使 用仿真的界面，让玩家融入游戏世界。飞行模拟等仿真软件故意使用类似于现实世界飞机的控
    件。另一类大量使用隐喻界面的软件是音乐创作软件。尽管在鼠标上模拟钢琴键、鼓垫、合成 器旋钮、滑块甚至吉他的音柱和琴弦很蠢，但在 iPad 的多点触屏上就不一样了。虚拟乐器表达 开始靠拢现实世界，如图 13-2 所示。</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00362.jpg"/></p>

<p><font size="2">图</font> <font size="6">13-2 Sunrizer</font> <font size="2">是</font> <font size="6">iPad</font> <font
        size="2">上的一款合成器，和真实的硬件非常相似。在触屏上，因为这与实物的交互如出一输，所以 模拟按钮和滑块对于习惯了实际硬件的用户很有意义。不过，</font> <font
        size="6">Sunrizer</font> <font size="2">的创作者并未成为全局隐喻的奴隶，而是按照数 字界面的特点做了改进，如在键盘上滑动可显示高低八度音</font> <font
        size="6">.</font> <font size="2">有效消除了屏幕宽度的限制。</font></p>

<p><br/>
    <br/></p>

<p>246<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 13 章隐喻、习惯用法及能供性</p>

<p>另外，数字合成器也并不完全用隐喻才能成功或有表达力。 iPad 上的 TC-11 合成器使用抽 象的习惯界面，既独特又极具表达力，如图 13-3 所示。</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00168.jpg"/></p>

<p>图13-3 TC-11采用完全不同的方式创造极具表达力的数字乐器其用户界面独特、抽象，完全符合习惯，用户必须通 过探索用触摸和手势创造的声音和视觉效果来学习。它甚至包括一个复杂的编辑器.用来创建新声音和交互。</p>

<p><br/>
    <br/></p>

<p>随着人们渐渐使用多点触摸显示器代替硬件控制的配件、工具、乐器，有理由预期现实世 界的隐喻最终会消失，而由这种经过优化、富含表达力的手势的惯用界面来替代。下一节将讨 论创造习惯用法范式界面的意义。</p>

<blockquote>
    247
</blockquote>
<p><span id="filepos0001331087"></span></p>

<p>习惯用法范式界面</p>

<p>特德•纳尔逊（ TedNelson) 称习惯用法为 “ 设计原则”。设计习惯用法基于我们学习并使 用习惯用法的方式，像 “ 拐弯抹角 ”（beat around the bush) 或 “ 酷 ” （ cool) 这样的说法一样，
    并不关注技术或直觉，而是通过学习简单、非隐喻的视觉或者行为习惯用法来完成目标和任务 , 从而解决了前面两种界面类型存在的问题。</p>

<p>习惯表达法不会像隐喻那样引起联想。当我们说 “beat around the bush” 时，既没有灌木， 也没有人在敲打。按习惯来说，东西或酷或火辣，都同样让人渴望。我们明白习惯用语的意思，
    只是因为已经学过这种用法，这种用法很特别，而不是因为我们头脑中下意识的联想；但是我 们能够迅速记住并且使用这些习惯用语，而且能这样做几乎都是下意识的。</p>

<p>如果我们不能直觉理解习惯用法，那么也无法推理。我们的语言充满成语，没有学过，就 不会明白。如果有人说 “ 乔叔叔翘辫子了 ” ，即使不对 “ 辫子 ” 或 “ 翘 ” 进行解释，你也知道是 什么意思。然而不管怎么排列组合 “ 辫子 ”
    和 “ 翘 ” ，你都很难从字面上理解其含义；只有通过 阅读上下文，或者有人教授过，你才能知道这句话的含义。你记得辫子、翘和死亡之间的模糊 联系，因为人类善于这样记住事物。</p>

<p>人的大脑确实拥有惊人能力来迅速地轻松学习并记忆大量习惯用法，而无须比较已知情形， 或是了解其工作方式，或者它们为什么这么工作。学习、记忆很必要，因为多数习惯用法没有 丝毫隐喻含义，或即使背后有典故，也因年代久远而失传了。</p>

<p>图形界面大都是习惯用法范式</p>

<p>事实证明，直觉的图形界面中大多数元素都采用了视觉习惯用法。窗口、标题栏、关闭框、 屏幕分割条、超链接和下拉菜单都是我们学习过的习惯用法，而不是具有隐喻意义的直觉。 OS X 操作系统在移除 HreWire
    磁盘之前先用垃圾箱来卸载，纯粹是源自习惯（许多设计师认为这 是个糟糕的习惯用法 ) ，尽管垃圾箱本身有视觉隐喻。</p>

<p>多数个人计算机使用的鼠标输入设备没有任何隐喻，而是习惯性的。鼠标的物理外观完全 没有表明它的目的或用途，与我们的经历也没有任何可借鉴之处，因此学习起来并不靠直觉（即 便 “ 鼠标 ” 这个名字也没多大帮助）。</p>

<p>在电影《星际迷航 4》（Star Trek IV) 中有这样一幕：斯科蒂（ Scotty) (23 世纪的优秀工 程师）返回 20 世纪的地球，想要使用计算机时，拿起鼠标，放在嘴边，对鼠标说话。这一幕既
    有趣又让人信服。鼠标不能通过视觉能供性（ affbrdance) 来表明它是定点设备。但只要拿着鼠 标在桌面上滑动，就能看到视觉符号和光标在电脑屏幕上同样地移动。鼠标向左，光标就向左 ;
    鼠标向前，光标就上移。第一次使用鼠标，就立刻能明白鼠标和光标是联系在一起的。这种感</p>

<p align="right" height="0pt" width="0pt">第 13 章隐喻、习惯用法及能供性</p>

<p>觉很容易学习，也很难忘掉。这就是习惯用法的学习。</p>

<p>多数智能手机和平板电脑上用的现代多点触摸用户界面也是习惯用法（尽管在屏幕上触摸 对象来激活用的是直觉，但手势用法必须学习）。随着苹果推广的拟物化日益以扁平和简单图
    形布局和控件代替，这更是一种习惯用法。如果触屏手势设计得当会比鼠标动作更易学。这是 因为，与用光标作为虚拟媒介的鼠标相比，用手指能够更加直接地操控屏幕上的对象。</p>

<p>具有讽刺意义的是，人们历来认为具有隐喻含义的常见图形用户界面元素，实际上是习惯 用法。可调窗口与无限嵌套文件夹并不具有实际隐喻含义，因为在现实世界中没有对应的东西。 因为这仅仅是习惯用法的学习。</p>

<p>好的习惯用法只需学习一次</p>

<p><img align="baseline" alt="" height="69" src="../Images/Image00188.jpg" width="54"/></p>

<p>在体验实现中心软件过程中形成的条件反射，令人们总认为学习界面很困难。以实现为中 心的软件界面之所以难学，是因为你只有理解了软件内部的工作机制，才能有效地使用它们，
    而我们多数掌握的知识未经理解就学会了，如人脸、社交、态度、优美旋律、品牌名称、房间 布置、房间或办公室里的家具等。我们不了解某人的脸为什么长成这样，但我们认识这张脸， 因为我们见过这张脸，自动（容易地）记住了。</p>

<p>设计原则</p>

<p align="right" height="6pt" width="0pt">所有的习惯用法都需要学习，</p>

<p>而好的习惯用法只需学习一次</p>

<p>关于习惯用法，很关键的一点是，习惯用法虽然必须学习，但很容易学习。好的习惯用法 只需学一次。学习 “neat” 或 “politically correct” 或 “the lights are on but nobody’s
    home” 或 “in a pickle” 或 “take the red-eye” 或 “grunge” 等词语是非常容易的，人脑只要听一次就能记住它 们。如单选按钮 （radio button) 、关闭框 （close box)
    、下拉菜单（ drop-down menu )和组合框 (combo box) 这样的习惯用法也一样容易学习。</p>

<p>品牌与习惯用法</p>

<p>釆用一个简单动作，为其赋予内涵，是市场营销和广告人员非常擅长的。毕竟综合习惯用 法是产品品牌的精髓，在这里，企业采用产品或者企业的名称，并赋予它所期望的含义。图 13-4
    所示是一个习惯用法符号的例子，它展示了习惯用法符号的力量。</p>

<p align="right" height="7em" width="0pt">249</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p>About Face 4 :交互设计精髓</p>

<p align="center" height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00284.jpg"/></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 134 <font size="2">这个习惯用法符号从开始使用就賦予了有别于其他事物的特殊含义。对于</font> 20 <font size="2">世纪五六十年代成长起来的人：
    这个似乎毫无意义的符号代表核辐射，让他们不寒而栗。视觉习惯用法符号如美国国旗，即便没有更强大的力量，也具 与隐喻同等效能。这种力量源自我们如何使用它，以及将其与什么联系在一起，而不是因为它与现实事物的固有联系。</font>
</blockquote>
<p><span id="filepos0001342813"></span></p>

<p><font size="6">创建习惯用法</font></p>

<p>图形用户界面发明之初，明显的优越使众多观察者将其成功归于界面的图形本质。虽情理 之中，但并不确切。第一代 GUI ( 如最初的 Mac) 之所以表现出色，主要因为利用图形界面特
    性可设定一系列用户与系统交互的词汇。尤其是，图形用户界面接受的输入信息不再来自毫无 限制的命令行，而是来自严格限制的一组鼠标动作。在命令行界面中，用户可以输入语言中的
    任何字符的组合，几乎有无限多种：而为了正确地输入，用户必须准确地知道程序的期望，必 须精确记忆命令行使用的字母与符号，而且字母和符号的顺序也很重要，甚至大小写也不能错。</p>

<p>在现代图形用户界面中，用户能用鼠标光标指向屏幕上的图片或单词。这些选择从用户大 脑转移到了屏幕上而无须记忆。用户可以利用鼠标上的按钮进行单击、双击，或单击并拖动。
    键盘输入数据，但通常不用于输入命令或导航。尽管执行的任务并没有比命令行少多少，但用 户输入词汇的原子元素数量从几十个降至 3 个。</p>

<p>交互词汇中的基本元素越多 . 学习过程所耗费的时间和困难就越多。限制交互词汇数量 会降低基本元素层面的表现力。不过，基本元素极易组成大量复杂的交互，就像字母组成单词， 单词构造句子一样。</p>

<p>适当结构的交互词汇可以用一个倒金字塔表示。所有易学的交流系统都遵循如图 13-5 所示</p>

<p align="right" height="0pt" width="0pt">第 13 章隐喻、习惯用法及能供性</p>

<p><img align="baseline" alt="" height="247" src="../Images/Image00302.jpg" width="385"/></p>

<p>的模式。最底层包括原语（ primitive), 语言中的一切由这些原子元素构成。在现代图形用户界 面中，这些原语包括鼠标定位、点击、按下键盘上的键；在触摸手势系统中，原子元素由敲击 和拖曳构成。</p>

<blockquote align="center" height="0pt" width="0pt">
    <font size="2"><font color="#FFFFFF">习惯用法</font></font>
</blockquote>

<blockquote align="center" height="0pt" width="0pt">
    <font size="2"><font color="#FFFFFF">应用程序特定命令和反馈</font></font>
</blockquote>

<blockquote align="center" height="0pt" width="0pt">
    <font size="2">组合</font>
</blockquote>

<blockquote align="center" height="0pt" width="0pt">
    <font size="2">通常的输入输出动作</font>
</blockquote>

<blockquote align="center" height="0pt" width="0pt">
    <font size="2">输出，下拉，排序， 对话框</font>
</blockquote>

<blockquote align="center" height="7pt" width="0pt">
    <font size="2">编辑域，选框，高亮</font>
</blockquote>

<p><font size="2">鲁光标，文本</font></p>

<p><font size="2">原语</font></p>

<blockquote>
    <font size="2">图</font> 13-5 <font size="2">图形用户界面易于使用的主要原因在于推行有限的交互词汇，由指向、单击和拖动这些极少量的原语组成复杂
    的习惯用法。这些原语构成大量简单的组合词，进而能组合成多种复杂的特殊领域的习惯用法，所有这些都以同样几个 易于学习的动作为基础。</font>
</blockquote>
<blockquote>
    <font size="2">输入，删除</font> ,
</blockquote>
<blockquote>
    <font size="2">创建，拖动</font>
</blockquote>
<blockquote align="center">
    <font size="2">双击，单击按钮</font> ,<br/>
    <br/>
    <font size="2">选择</font>
</blockquote>
<blockquote align="center">
    <font size="2">点击，单击，拖曳</font> ,<br/>
    <br/>
    <font size="2">按键</font>
</blockquote>
<p>中间层的组合用法（ compound) 更复杂，通过组合一个或多个原语创建而成。其中包括文 本展示这类简单的视觉对象，双击（ double-clicking )、拖动（ dragging )、滑动（ swiping )、捏
    (pinching) 等动作，以及表单、链接、按钮、多选框、调整大小控点 （resize handle) 中按钮（ button )、</p>

<p>复选框（ checkbox) 等可操控对象。</p>

<p>最上层为习惯用法。习惯用法结合并组织了所考虑的问题的领域知识，包括用户的工作模 式和目标，但不是计算机解决方案的信息。一系列习惯用法提供了大量的词汇来表达程序试图 解决的问题。在图形用户界面中，包括标签按钮 (labeled
    button) 、字段 (field) 、导航条 （navigation bar) 、列表框 （list box) 、图标（ icon), 甚至成组的字段和控件 （field and control )，或者整个 窗格和对话框
    （pane and dialog) 〇</p>

<p>任何不遵循这种方式的语言都难以学习。计算机以外许多有效的交流系统都有类似的构造。 美国街道上的标志牌采用形状和颜色的简单组合：黄色三角形表示警告；红色八角形显示强制； 绿色长方形提出通告。</p>

<p><span id="filepos0001350976"></span></p>

<p><font size="6">手动能供性</font></p>

<p align="right" height="2em" width="0pt">唐纳德 • 诺曼 （Donald Norman) 在其经典著作《设计心理学》（ 77ze Z)es7g/? <i>of Everyday
    Things</i> ) 中，首次提出并定义了能供性（ affbrdance): “ 事物所感知到的及其实际的属性，主要是那些能</p>

<blockquote>
    251<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>决定事物可能如何使用的基本属性 。”</p>

<p>这个概念，毫无疑问，对于界面设计必不可少。但就我们的目的而言，该定义忽略了一个 关键联系：如何知道这些属性给我们提供了什么？如果看到某个东西就明白如何使用它，这就
    是这个东西的能供性在起作用，你肯定使用某种方法建立了心理联系。就我们的目的而言，该 定义就忽略了这种方法。</p>

<p>因此，我们提议更改诺曼的定义，去掉了 “ 实际的 ” 这个词。如此一来，能供性就成为一 个纯粹的认知概念，指我们认为对象能做什么，而不是它实际上能做什么。如果一处居所的大
    门旁边装着按钮，则其能供性百分之百表明它是门铃。如果我们按下时，却触发了脚下的陷阱， 掉进陷阱，就证明它不是门铃，但其能供性仍然是一个门铃。</p>

<p>那么我们怎么会认为它是门铃呢？很简单，因为在复杂而漫长的社交和成长过程中，我 们知道了门铃，学会了敲门的礼节，知道门旁按钮的用处。我们知道这类按钮是门铃，是因
    为看见过周围类似的电子设备，或者因为多年前与父母一起站在门阶上学会了如何进入他人 家中。</p>

<p>但是这里还有另一种力量在起作用。如果在没有把握的地方，如汽车的引擎盖上，就很难 想象出它有什么作用，但还是能认出这是可以按的对象。因为我们有操控工具的天性，所以能 认出来。当看见身边有手指大小的凸起物体东西，就会有冲动去按它们（在 2
    岁孩子身上很容 易观察到这种行为）。看见长而圆的物体，就会合拢手指想抓住它们。这就是诺曼用 “ 能供性 ” 所要表达的意思。不过，为了清晰起见，我们将这种如何用手操作对象的本能重命名为“人性 能供性 ”（manual
    affordance) 。当人工制品明显地打造得适合我们的手或身体时，我们能看出直 接操作它们的方法，不需要任何书面说明。事实上根据物体的形状和手的关系来理解如何使用 工具，可直接通用到用直觉理解界面。</p>

<p>诺曼详细地讨论了手动能供性如何比文字说明更具有吸引力。他举的一个典型例子是一扇 用一个金属杆做把手才能推开的门。金属杆的形状、高度和位置都恰到好处，正适合人用手去 抓。门的手动能供性好像在说 “ 拉我 ”
    。无论人们多么频繁地使用这扇讨厌的门，总是试图把它 拉开，因为能供性太强烈了，不管门上贴了多少 “ 推 ” 的标志，能供性都会使得人们忽略 “ 推 ” 的标志。</p>

<p>手动能供性例子很少。我们用手抓类似把手的东西，如果很小就会用手指捏或推，沿着线 条拉，绕着轴转。我们用手或手指推平板。如果在地板上，我们会用脚来推。我们旋转圆形的
    东西，小的用手指，例如拨号；大一些的用双手，例如操控方向盘。这些手动能供性是多数视 觉用户界面设计的基础。</p>

<p>252<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 13 章隐喻、习惯用法及能供性</p>

<p>老一些的操作系统，如 Windows 7 和 OS X 设计的小部件依靠阴影和突出显示来使屏幕图 像显得更立体。这些所谓的拟物化就跟不上 Android、Windows 8 和 OS Maverick 的形势了，它
    们出现以类似按钮一样图片的形式提供虚拟手动能供性，就像按钮对我们擅长操控工具的大脑 说 “ 来按我 ” 或 “ 滑动我 ” 。近来的扁平化和视觉极简的用户界面，为了视觉上的简化，移除了
    这些虚拟手动能供性，实际影响到了易用性。</p>

<p><span id="filepos0001358332"></span></p>

<p>手动能供性的语义学</p>

<p>一个未加修饰的虚拟的手动能供性无法提供的是，对执行之后完成哪些功能的提示。我们 看到一个按钮样的东西，但如何才能知道按下它能完成哪些任务？软件和机械对象不同，不可
    能只通过跟踪虚拟杠杆与其他机械的关系而知道其实际功能，无法检测其因果关系。相反，我 们必须依靠补充文本和图片，或者更常用到的是以前的知识和体验 。Windows 7 滚动条的能供
    性清楚地表明它能操作，但能告诉用户其作用的唯一东西是箭头（移动应用中往往没有），信息 都藏在箭头的方向中。为了了解滚动条对文档位置的控制，要么有人教过用法，要么通过试验 学会。</p>

<p>控件必须有文本或者图标标签来指明其意义。如果控件没有透露出答案，就只能通过亲自 体验或培训这两种方法来学习，或在其他地方见过，或请教过他人，或者亲自试试看会发生什 么。人们如果不能从本能和直觉中获得任何帮助，就只能依靠经验。</p>

<p><span id="filepos0001359750"></span></p>

<p>能供性的实现预期</p>

<p>在现实世界里，一个对象做它能做的事是因其物理形态及其与其他物理对象之间的联系 而决定的。锯之所以可以锯木头，是因为锯齿锋利，锯身平滑，而且有一个把手；门上的
    旋钮之所以可以开门是因为它与插销相连。但是在数字世界里，对象之所以可以完成任务， 是因为开发者赋予它做某事的能力。通过物理观察，我们可以发现大量关于锯和旋钮如何
    工作的信息，不会被所见到的现象所蒙蔽。然而在计算机屏幕上，虽然我们可以见到凸起 的三维矩形像一个按钮等我们去按，但是并不意味它会被按，可能有其他操作。我们会被
    欺骗，是因为与现实世界不同，我们在屏幕上所见到的与其背后的功能没有必然的联系。换 言之，我们也许不知道锯是如何工作的，甚至因不能有效地操作它而感到沮丧，但绝不会被
    它愚弄。它并不会呈现它所不具备的功能。而在计算机屏幕上，不经意间就能很容易使我们 犯错。</p>

<p align="right" height="6pt" width="0pt">当我们在屏幕上渲染一个按钮时，就与用户建立了一个契约。用户按下按钮，按钮在视觉
    上就会发生变化。用鼠标单击，它会向下凹。进一步，这种契约表明按钮将执行图例中确切说</p>

<blockquote>
    253
</blockquote>
<p>明的某些合理的工作。这听上去显而易见，但令人吃惊的是，有那么多程序提供诱饵式 (bait-and-switch) 的手动能供性。对于按钮，这种情况发生得相对较少，但对于其他控件，这
    种现象很常见，尤其是在网站上，因为网站缺少能供性，导致很难区分控件、内容和装饰。要 确保你的程序兑现它手动能供性所表现的期望。</p>

<p><span id="filepos0001362316"></span></p>

<p><font size="6">直接操作与顺从</font></p>

<p>现代图形用户界面建立在 “ 直接操作 ” （ directmanipulation) 屏幕上图形对象的概念上：按 钮、滑块、菜单及其他功能控件，以及图标和其他数据对象代表。选择和变更屏幕上对象的能
    力对我们如今的设计而言是基础性的。但究竟什么是直接操作？</p>

<p>1974 年，本 • 施耐德曼（ BenShneiderman) 创造了词汇 “ 直接操作”，用来描述一种界面 设计策略，这种策略由三部分组成：</p>

<p>• 应用所涉及数据对象的视觉呈现。</p>

<p>• 在对象上执行的视觉和手势机制（相对于自由形式的文本命令）。</p>

<p>• 这些动作的即刻可视结果</p>

<p>值得注意的是，其中两点关注的是应用向用户提供的视觉反馈。因为用户在此过程中所看 到的重要性可以更精确地称为 “ 视觉操控 ”（visual manipulation ),虚拟手动能供性和丰富的视
    觉反馈都是直接操作界面的设计关键元素。</p>

<p><img align="baseline" alt="" height="71" src="../Images/Image00013.jpg" width="54"/></p>

<p>piwi . ；</p>

<p>丰富的视觉反馈是成功的直接操作的关键。</p>

<p>没有恰当的视觉反馈所实现的交互，将不会有效创造直接操作的体验。</p>

<p><span id="filepos0001365070"></span></p>

<p>直接操作的使用</p>

<p>我们可以使用直接操作指向我们想要的东西。要想把对象从 A 移动到 B ,就点击并拖动 过去。这里的一个通用原则是，更好、更加容易引发 “ 流 ” 的界面，高级直接操作习惯用法 更多。</p>

<p>创作工具在这方面做得很好。例如，多数文字处理器让用户通过拖动标尺上的滑块来设置 制表符和缩进。有人说： “ 我想要我的段落从这里开始 ” ，应用就计算出距离左边距正好是 1.347</p>

<p>254</p>

<p align="right" height="0pt" width="0pt">第 13 章隐喻、习惯用法及能供性</p>

<p>英寸，而不是强迫用户在某个文本框理输入 1.347 。</p>

<p>同样，多数艺术和设计工具（例如 Adobe 的 Creative Suite )提供了对对象的高度直接操作 ( 尽管还有很多参数需要点击输入）。谷歌的 Snapseed 照片编辑器是以消费者为中心、多点触屏
    应用的极好例子，这款应用充分运用了直接操作，它用手势控制数字图片编辑的图形处理参数 , 而不是用笨拙的滑块或者数字文本字段。</p>

<p>图 13-6 显示了多个控制点可以通过敲击来放置或者选择。这些点能够拖动；也可以在当前 选中的点上捏一下来调整应用滤镜的直径，给用户时反馈是一个圆圈，用来显示滤镜应用的强
    度。水平滑动控制滤镜强度，用围绕点的绿色仪表和屏幕底部的数字刻度来追踪。垂直滑动可 以在亮度、对比度和饱和度之间选择。尽管这在手势中融入了很多功能，但使用几下以后就成
    了人的第二本能，因为有丰富的视觉无状态反馈和操作流，用这些可以调整图像。</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00025.jpg"/></p>

<p>图13-6谷歌在iPad上的Snapseed照片编辑器通过点击、捏、转动和滑动来控制位置和操控视觉效果。除实时预览 以外，还提供了数字反馈，但不需要输入文本数字，或者说，实际上根本不允许输入。</p>

<p><br/>
    <br/></p>

<p>直接操作的原则适用于多种情况。如果列表中的项需要重新排序，用户可能想要按字母排 序，但也可能想按照个人喜好排列 —— 而这是算法做不到的。用户应该能够直接拖动列表项到 自己想要的顺序，而不需要用算法来干扰这种基本操作。</p>

<blockquote>
    255
</blockquote>
<p><img align="baseline" alt="" height="109" src="../Images/Image00099.jpg" width="96"/></p>

<p>About Face 4 :交互设计精髓</p>

<p>拖放也能免去让用户厌烦地重复使用对话框和菜单。在图 13-7 所示的 Sonos Desktop Controller 中，用户能够直接把歌曲拖进当前播放列表的任何位置；或者拖进任何一个喇叭里，
    立刻播放。用户不用打开菜单来选择选项。</p>

<p><font size="1"><font color="#FFFFFF">NOW PLAYING (Visitor Bedroom)</font></font></p>

<blockquote>
    <font color="#FFFFFF">D</font> <font size="2"><font color="#FFFFFF">丨</font></font> <font color="#FFFFFF">R</font>
</blockquote>

<p><font color="#FFFFFF">(y) Kitchen</font> <font color="#FFFFFF">(^5) LlVtif^ Hi</font></p>

<p><font size="1"><font color="#FFFFFF">t</font></font> <font size="1"><i><font color="#FFFFFF">Cdif</font></i></font>
    <font size="1"><font color="#FFFFFF">- They Might</font></font> <font size="6"><i><font
            color="#FFFFFF">imm</font></i></font> <font color="#FFFFFF">Sleep Fuse</font></p>

<p><font size="2"><font color="#FFFFFF">輯</font></font> <font color="#FFFFFF">ar Fme</font> <font size="2"><font
        color="#FFFFFF">诚</font></font></p>

<p><font size="5"><font color="#FFFFFF">©</font></font></p>

<blockquote>
    <font size="1"><font color="#FFFFFF">Mailer 8edroom Gro邱</font></font>
</blockquote>

<p><font size="1"><font color="#FFFFFF">■ Caii p MtitJcjerA HcJift</font></font></p>

<blockquote>
    <font size="1"><font color="#FFFFFF">M这x 各</font></font> <font size="1"><font color="#FFFFFF">Alex
    权〇〇阳</font></font> <font size="1"><i><font color="#FFFFFF">Cnmi&gt;</font></i></font> <font color="#FFFFFF">Mi C«irf&gt;p</font>
</blockquote>

<p><font color="#FFFFFF">{S)</font> <font size="2"><i><font color="#FFFFFF">Ro&amp;m</font></i></font></p>

<p><font color="#FFFFFF">• Ikiy dsv .. TNry MM 8«? d</font> <font size="2"><font color="#FFFFFF">継彻</font></font></p>

<blockquote>
    <font size="6"><i><font color="#FFFFFF">Odw</font></i></font> <font color="#FFFFFF">“is</font>
</blockquote>

<blockquote>
    <font size="1"><font color="#FFFFFF">Victor 8«&lt;irwm Croup r</font></font>
</blockquote>

<p><font size="1"><font color="#FFFFFF">■ A</font></font> <font size="1"><i><font color="#FFFFFF">Vam</font></i></font>
    <font size="1"><font color="#FFFFFF">- ftfgar Fro</font></font></p>

<blockquote>
    <font size="1"><font color="#FFFFFF">Uft* -</font></font>
</blockquote>

<p><font size="1"><font color="#FFFFFF">A Dali Sleep</font></font></p>

<p><font size="1"><font color="#FFFFFF">I A D»iy in The Ufe</font></font></p>

<p><font color="#FFFFFF">繁</font></p>

<p><font color="#FFFFFF">_|</font></p>

<p><font color="#FFFFFF">i¥.</font></p>

<p><font size="1"><font color="#FFFFFF">A A deux vyart</font></font> <font color="#FFFFFF">〇</font> <font size="1"><font
        color="#FFFFFF">sf</font></font></p>

<p><font size="1"><font color="#FFFFFF">A po</font></font> <font size="1"><i><font color="#FFFFFF">MU</font></i></font>
</p>

<p><font size="1"><font color="#FFFFFF">A few SCfwb Terkis^</font></font></p>

<p><font size="1"><font color="#FFFFFF">A Fine ?R&lt;jmi»nce</font></font></p>

<p><font size="1"><font color="#FFFFFF">A tutk*</font></font> <font size="1"><i><font
        color="#FFFFFF">Km\</font></i></font></p>

<p><font color="#FFFFFF">[■ tear Qyeus-</font></p>

<p><i><font color="#FFFFFF">m</font></i></p>

<p><font color="#FFFFFF">«</font></p>

<p><font color="#FFFFFF">气</font> <font size="2"><font color="#FFFFFF">5</font></font></p>

<p><font size="2"><font color="#FFFFFF">寶爾</font></font></p>

<p height="2em" width="0pt"><font size="5">M</font></p>

<p><font color="#FFFFFF">I DiscjpNne</font> <font color="#FFFFFF">Doa^r</font> <i><font color="#FFFFFF">Who</font></i>
    <font color="#FFFFFF">$〇M«&lt;itr3CK?</font></p>

<p><font size="1"><font color="#FFFFFF">Draw on sweet night - English tedn^als</font></font></p>

<p><font color="#FFFFFF">Dreamland</font></p>

<p><font size="1"><font color="#FFFFFF">Dreams fables</font></font></p>

<p><font size="1"><font color="#FFFFFF">Oukmea</font></font></p>

<p><font size="1"><font color="#FFFFFF">Dvor&lt;^c Comply f&gt;s»o</font></font> <font size="1"><i><font
        color="#FFFFFF">Tna</font></i></font> <font size="1"><font color="#FFFFFF">iBvaux Ariv Tri〇» (Di Dvorak Piano
    Trios - Yo- Yo- Ma. fmartueJ A^. Voun</font></font></p>

<p height="0pt" width="0pt"><font size="5">E</font></p>

<blockquote>
    <font size="1"><font color="#FFFFFF">Oeaiew H!n, Vo! 2</font></font>
</blockquote>
<p><font color="#FFFFFF">#、;V</font> <font color="#FFFFFF">吻</font></p>

<p><font size="6"><i><font color="#FFFFFF">trnM^i</font></i></font></p>

<blockquote>
    <font size="2"><i><font color="#FFFFFF">、m</font></i></font>
</blockquote>

<blockquote>
    <font size="1"><i><font color="#FFFFFF">%</font></i></font> <font size="1"><font color="#FFFFFF">f| E«c*3?e At Th«
    Blue Mote (D^c 4i</font></font>
</blockquote>

<blockquote>
    <font size="2"><i><font color="#FFFFFF">^.n0i&gt;h</font></i></font> <font size="1"><font
        color="#FFFFFF">2«td</font></font> <font size="2"><i><font color="#FFFFFF">iUiim</font></i></font> <font
        size="1"><font color="#FFFFFF">Mudriy^b</font></font> <font color="#FFFFFF">◎ Ske&amp; T</font> <font
        size="2"><font color="#FFFFFF">晦</font></font> <font color="#FFFFFF">er 0 Alarms</font> <font size="2"><font
        color="#FFFFFF">图</font></font> <font color="#FFFFFF">13-7 Sonos Desktop Controller</font> <font size="2"><font
        color="#FFFFFF">让用户把搜索浏览结果中的歌曲和专辑拖动到播放列表的任何位置，如正在播放区
    域则立刻播放，或频道的任何频道列表。只需要一个拖放手势即可。类似地，此应用的平板电脑版本也可直接操作音乐。</font></font>
</blockquote>
<p>大家很少看到直接操作界面要求输入复杂的数值数据的情况。通常，界面上会给出数值数 据字段或者滑块。对于用图形显示数值数据来直接操作，有一个不错例子是 iPad 上的 Addictive Synth 应用，如图 13-8
    所示。这款应用允许用户用手指为音乐合成器绘制波形并设置效果参数 , 在屏幕上的键盘马上就能弹出音乐。</p>

<p>直接操作简单、直接、易用，也易于记忆。不过，正如我们所讨论的，直接操作的习惯用 法正如多数习惯用法一样，首先必须学习。幸运的是，因为这些交互的可见和直接等特质，与
    现实世界的物体交互很相似，学习这些习惯往往很容易。学会之后，几乎不会忘记。</p>

<p>256</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 13 章隐喻、习惯用法及能供性</p>

<p align="center" height="1em" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00236.jpg"/></p>

<p>图 <font size="2">13-8 Addictive Synth</font> 是 <font size="2">iPad</font> 上的音乐合成器，允许用户用手指绘制波形和声音效果，实时听到结果。这也是该应
    用名字的由来沉浸式体验让人非常满意。</p>

<p><br/>
    <br/>
    <span id="filepos0001380835"></span></p>

<p>直接操作并不总是合适</p>

<p>苹果公司在 //wm〃/? 办心 GW 办中这样谈论直接操作：“用户希望感觉自己在控制</p>

<p>计算机的行为 。” i 〇 S 用户界面明确显示出，苹果认为茁壮成长是交互设计的基本信条。另一方 面，以用户为中心的设计专家唐纳德 • 诺曼（ 2002 年）表示： “ 直接操作、第一人称系统有其
    缺陷。尽管往往很易用、有趣、吸引人，但用起来经常很难完成好工作任务。这种设计要求用 户直接完成任务，而用户可能并不擅长。 ” 我们应该听谁的？</p>

<p>答案当然是，二者都对。直接操作是一个强大的工具，但要求用户发展自己的技能，能有 效地完成复杂任务（例如用 CAD 系统设计一架飞机 ) 。很多直接操作习惯用法，即便相对普通， 但要求动作协调，有目的感。例如，在 Windows
    文件管理器的文件夹之间移动文件也可能是一 项很复杂的任务，需要心灵手巧才能完成。在设计直接操作习惯用法时，请谨记这些挑战。某 些直接操作往往是好事，但根据人物模型的技巧和使用背景，也可能过犹不及。应该始终考虑
    人物模型需要手动操控了什么，应用可以辅助做什么，不管是用指南还是提示，或是自动的。</p>

<blockquote>
    257
</blockquote>
<p><span id="filepos0001383601"></span></p>

<p>顺从与提示</p>

<p>回到诺曼的能供性概念，关键的一点是在视觉上与用户交流如何直接操作界面元素。我们 使用 “ 顺从 ” （ pliancy) 指代对象或者屏幕区域对用户输入及其他操控的响应。例如，能用手指 或者鼠标 “ 按动 ”
    的按钮控件，就是顺从的。任何可以拖动的物件都是顺从的，电子表格的所 有单元格和文字处理文件中的所有字符都是顺从的。</p>

<p>多数情况下，对象是顺从的这一事实应该通过视觉传达给用户。唯一不适用的情况是只想 向专家用户呈现丰富、复杂的功能，不关心他们是否有能力学会并使用这款应用程序。在这样
    的情况下，原本应该把顺从的屏幕空间和视觉注意力用在其他用途可能更合适。不要轻易决定 使用这种思路。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p><img align="baseline" alt="" height="59" src="../Images/Image00308.jpg" width="51"/></p>

<p>设计原则</p>

<p align="right" height="2pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    尽可能用视觉表达顺从:</p>

<p><br/>
    <br/></p>

<p>有三种基本方式来向用户表达（或提示）对象的顺从：</p>

<p>• 以静态视觉能供性作为对象本身的一部分。</p>

<p>• 动态地改变对象的视觉能供性，以适应输入焦点或者其他系统时间的变化。</p>

<p>• 就桌面光标设备界面而言，当鼠标经过并与对象交互时，改变其视觉能供性。</p>

<p>静态提不</p>

<p>对象的顺从通过对象本身的静态渲染来传达，就是静态提示。例如，一个按钮控件的三维 雕塑效果是一种静态视觉提示，因为它为按下提供了（虚拟）手动能供性。</p>

<p>对于有大量对象和控件的复杂桌面界面而言，静态对象提示有时可能在屏幕上进行不切实 际的渲染。如果每样东西都由三维立体感来提供能供性，界面就看起来像个雕塑花园。下一节 要讨论的动态提示，为这个问题提供了解决方案。</p>

<p>不过，静态提示非常适用于移动用户界面。移动界面对象少，必须足够大才能让手指去操 控，这就为能供性所需要的视觉线索留出了足够的空间。</p>

<p>具有讽刺意义的是，当前移动 UI 的趋势是扁平化和视觉元素简化，简化到了视觉元素仅 有文本、单色图标和直线扁平图表和卡片。如此一来，不管是从创造视觉层次，还是从指示顺
    从和能供性的角度来看，都给设计师提出了很多挑战。最终结果是，移动界面视觉上虽然变得 更加简单，但学习却越来越难。</p>

<p>258</p>

<p align="right" height="0pt" width="0pt">第 13 章隐喻、习惯用法及能供性</p>

<p>动态提示</p>

<p><img align="baseline" alt="" height="88" src="../Images/Image00241.jpg" width="264"/></p>

<p>动态提示最常用于桌面应用的用户界面。一般这样工作：光标经过一个顺从的对象，该对 象就暂时改变外观，如图 13-9 所示。只要点击鼠标或光标滑过，对象就会改变外观。这种效果 通常称为 “ 翻滚 ” （ rollover)
    。一个优秀的例子是工具栏上图标按钮（参见第 2 章）的行为：尽 管工具栏上没有持久的按钮式能供性，但鼠标经过任何一个图标按钮时，都会出现能供性。结 果是控件具备了按钮行为，消灭了不变的能供性，大幅减少了工具栏上的视觉混乱。</p>

<p align="right" height="2em" width="0pt">| <u>Cancel</u> 1 [ OK j <font size="2">图</font> 13-9 <font size="2">左侧的按钮是静态视觉提示的例子：空间渲染指出了它们的</font>
    “ <font size="2">可点击性”。右侧的图标按钮展示了动态视觉提</font></p>

<p><font size="2">示：尽管第一眼看</font> “ <font size="2">斜体</font> ” <font size="2">开关没有以按钮的形态出现，但鼠标经过时就变化，因而创造了能供性。</font>
</p>

<p>遗憾的是，触屏设备没有动态提示：设计师和用户只能使用顺从状态时的静态提示。</p>

<p>顺从响应提示</p>

<p>如果鼠标按下去，但还没有放开，或者手指正在按下控件，应该出现桌面顺从响应提示。 控件必须显示已经准备好改变的状态（参见第 18 章 ) 。这一点很重要，却往往被开发者所忽略。</p>

<p>一个按钮必须在视觉上从凸起转变到凹下的状态；选择框应该高亮框，而不应仅仅显示选 中标志。顺从响应对于调用动作或改变状态的控件来说，是很重要的反馈机制。它让用户知道 ,
    一旦松开了鼠标键，就会出现某些动作。顺从响应是取消机制中重要的一环。用户点击按钮， 按钮凹下以回应。如果用户在按下的时候移动了鼠标，或者移走了手指，那么屏幕上的按钮屏
    幕上的按钮就没有激活（与缺少顺从响应一致），回到静止的凸起状态。</p>

<p>光标提示</p>

<p>光标提示是另一种桌面顺从提示方式。这种方式通过在鼠标经过对象或者屏幕区域时改变 光标的外观来传达顺从。例如，如果鼠标经过一个窗口框架，鼠标变成双箭头状态，显示出窗 口边缘能够拉伸。这是唯一能够表明框架可以拉伸的视觉能供性。</p>

<p>光标提示最重要的是清楚地向用户指出，一个未经装饰的对象是顺从的。光标提示也经常 用来指出，哪种类型的操控动作可以用在一个对象上（例如前面刚刚提到的窗口框架）。</p>

<p>一般来说，控件应该提供静态或动态视觉提示，而顺从（可操控）数据更应该提供光标提 示。例如，对于密集的标签化数据，如果不扰乱其清晰的外观，很难从视觉上提示顺从，所以
    光标提示就是最有效的方法了。有些控件很小，很难像按钮一样被用户发现，光标提示对于这</p>

<blockquote>
    259<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精嫌</p>

<p>种控件就至关重要。微软 Excel 中的分栏和分屏就是好例子，如图 13-10 所示。</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00207.jpg"/></p>

<p>图13-10 Excel使用光标提示来高亮数个自身没有显示出顺从的控件。可以拖动每一栏或者行之间短短的竖线来改变栏 宽或者行高.，鼠标变成双箭头，表明允许拖动。分屏控件也类似。光标经过一个未选中的可编辑单元格时，就变成加号，
    经过选中的单元格时，显示成可拖动光标。</p>

<p><br/>
    <br/></p>

<p>而触屏用户和设计师则没有这种顺从提示。第 19 章更详细地讨论在设计触屏应用时必须采 用的策略，以保证用户知道正在操控哪些控件，以及操控这些控件时能釆取哪些动作和手势。</p>

<p><span id="filepos0001395174"></span></p>

<p><font size="6">逃脱隐喻的掌控</font></p>

<p>创建应用时，可能忍不住想回头使用舒服的视觉隐喻，以吸引用户。为避免这种诱惑，只 能在少数特殊情境中使用全局隐喻，比如隐喻是体验不可或缺的一部分的情境。不要把隐喻当 成快速学习或者短期舒适的拐杖。</p>

<p>而创造容易记忆、恰当有丰富的顺从反馈的习惯用法反而会提高用户的工作效率，允许用 户专注于应用的内融合功能，不要陷入机械时代的隐喻和交互的桎梏。随着用户达到中级水平， 这样做就是帮了他们大忙。因为用户最终都希望可以变成中级用户。</p>

<p>260<br/>
    <br/></p>

<p><i>rp</i> I <i>/I</i> <font size="2">^3</font></p>

<p><span id="filepos0001396529"></span></p>

<p align="right" height="2em" width="0pt"><font size="7">重新思考数据输入、</font></p>

<p align="right" height="3pt" width="0pt"><font size="7">存储与检索</font></p>

<blockquote>
    在数字科技的世界中，实现模型思维在数据管理上体现得最明显：输入、 存储、检索数据。
</blockquote>
<blockquote>
    你遇到多少次这样的情况：在一组表单中输入信息，却弹出令人迷惑的错 误对话框，告诉你输入错误。或许是在电话号码中输入了连字符，或许是在只 能输入名字的地方输入了姓氏和名字，或许不小心在只能输入数字的地方敲了 文本。快，呼叫数据警察！
</blockquote>
<blockquote>
    问题还不止于数据输入。如果你曾教过母亲怎么用电脑，应该明白用“困 难”形容这个问题是不公平的。刚开始一切顺利：打开文字处理软件，敲入几 个句子。她跟得上你，因为跟打字没什么区别。但如果点了关闭按钮，就会弹
    出对话框“您想要保存更改吗？ ”这时你和你母亲就一起撞墙了。她看着你问 道：“这是什么意思？ 一切正常吗？ ”你指引着她保存，她又有了一个迫切而 困难的问题：“文件去哪儿了？我以后怎么找出来？”
</blockquote>
<blockquote>
    或者问题发生在你自己的智能手机上。你想向朋友展示一张^的照片，但是由 于长长的缩略图列表，你花在寻找照片上的时间，远远超过有价值的分享那一瞬间。
</blockquote>
<blockquote>
    这些问题，都源自软件强迫人们像电脑一样思考。软件迫使人们毫无必要 ±也面对电脑内部的数据输入、存储和检索机制。不仅你母亲有这个问题，即便 高级用户也很容易迷惑或犯错误。我们用数千美元购买硬件和软件，只为了接
    受应用程序的粗鲁质询：“您真想保存该文档吗？”真奇怪，我花了一下午做 这个文件，当然想要保存了。没错，微软Office，说的就是你。
</blockquote>
<blockquote>
    本章提供了一套不同的方法来处理数据输入、文件与保存和检索问题，这 些方法更符合产品使用者的心理模型。幸好我们不是唯一这么想的人。
</blockquote>
<blockquote>
    261<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p><font size="6">重新思考数据输入</font></p>

<p>在第 8 章中，我们讨论了应该如何设计交互产品，让产品像思虑周全的聪明人一样行动； 但产品很难达到在要求用户输入数据时与那位优秀人士等同，同时实现模型思维的某些产物也
    在阻止人们最自然地工作。本章我们将讨论现有方法处理数据输入时存在的问题，以及提供一 些方法来让这个过程更加以人为本，而不是专注于数据库的需求。</p>

<p><span id="filepos0001401861"></span></p>

<p>数据完整 <font size="5">VS</font> .数据免疫</p>

<p>软件正常工作的关键要求是数据洁净。常言道： “ 垃圾进，垃圾出。 ” 因此，在处理数据出 入时，开发者会遵照一条简单的强制规则：绝不让被污染、不干净的数据进入程序中。于是，
    程序员在用户界面中设立壁垒，以使不良数据无法进入系统，不会破坏通常所说的 “ 数据完整”。</p>

<p>数据完整假定，因为外面信息混乱，所以在任何数据进入计算机前，都要过滤并清洁。软 件必须对不良数据保持高度警惕，就好像过境处的海关官员那样，因此所有数据在输入点都要
    受到检查。在经过严格检查，允许进入程序后，数据就是纯净的。这样的优点在于，一旦数据 进入数据库，代码就不必反复检查数据是否有效或适当。</p>

<p>但这种方法将数据库的需求置于用户需求之前，导致用户每次向计算机输入数据都会受到 同等的检查。虽然多数移动或个人生产力软件不会遇到这个问题，如 PowerPoint 不知道或者不
    关心你是否正确地格式化了数据呈现；但一旦开始大型合作，无论是为企业管理系统输入数据 的职员，还是在线购买 DVD 的网民，就面临这种类似边境巡逻式的检查。</p>

<p>每天在工作中填写大量表格的人明白，他们得到的数据并不能达到软件要求的那样纯净， 而往往不完整，有时甚至是错误的。他们也可能打破表单的严格要求，以加快数据处理来取悦
    顾客；当遇到一个在这方面完全不灵活的系统时，这些人要么必须戛然而止，要么必须想办法 推翻系统，干完活儿。若软件意识到人类存在的这些事实，用恰当的用户界面直接解决了这些 问题，每个人都会受益。</p>

<p>除了效率，这个问题的另一面更加有害：软件检査数据就等于宣称：用户是无关紧要的， 软件是无所不能的，用户是为软件工作的，而非相反。这显然不是我们用自己的科技想要创造
    的世界。我们要让用户感受到权力，要让计算机为我们工作。我们必须回到理想的“数字劳动 分工 ” 上：计算机干活，人做决定。</p>

<p>令人高兴的是，很多方法可以保护软件免受不良数据的侵害。程序员不是屏蔽不良数据， 而是要让系统不受信息不连贯和中断的影响。这种方法需要创造更加聪明、更加先进的程序，</p>

<p>262<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 14 章重新思考数据输入、存储与检索</p>

<p>能够处理数据置换，让程序具有某种数据免疫力 （data immunity )。</p>

<p>要实现数据免疫，软件开发必须三思而行，需要帮助时能够寻求帮助。多数软件计算数字， 而不首先检查数据。软件认为，一个数字字段必须包含一个数字，因为数据要保持完整。如果 用户输入 “nine” ，而不是 “9”
    ，程序就会呕吐，但阅读表单的人不会眨一下眼。程序在执行计 算之前看了一眼数据，就会发现简单的数学公式没法完全有效。</p>

<p>我们设计程序时，必须让程序相信，用户输入的是他所希望的。如果用户希望改正，无须 程序反复提出改正要求用户就可以改正。而程序应在其他地方寻求帮助：是否有模块知道如何 将字母解释为文本数字？是否有修改历史记录可以解释用户的意图？</p>

<p>如果这些措施都失败了，程序须为数据添加注释，以使用户检查问题，能找到准确描述发 生的事情和程序举措的完整记录。</p>

<p>是的，用户输入 “adsf” 而不是 “9.38” ，程序不会得到满意的结果，但是立即停止程序来 解决问题也不令人满意。输入过程和结果报告同样重要。如果用户界面设计正确，当用户输入 “adsf”
    时，程序若提供视觉反馈，用户也不大可能输入上百条不良记录。通常，用户只有在程 序愚蠢地对待他们时，才会愚蠢地行事。</p>

<p>用户输入不正确的数据时，数据往往接近正确。程序应该提供尽可能多的帮助来纠正。例 如，如果用户在两个字母的州代码中输入 “TZ” ，又添加了城市名 “Dallas ”，是不需要多少智 能或者计算资源就能知道如何纠正问题。</p>

<p><span id="filepos0001408518"></span></p>

<p>处理丢失数据</p>

<p>显然用户不希望遗漏重要数据，而且这也违背系统的功能。如果数据录入人员未能输入发 票金额之类的重要数据，就会造成实质问题。不过，如果程序为了指出错误阻止录入员，就不
    恰当。把你的程序想象成一辆车。如果汽车发现挡风玻璃清洗器的液体不多了，就锁定方向盘， 驾驶员可不会轻易接受。</p>

<p>程序应该更加灵活。用户可能不会立刻访问所有的必填字段，用户的工作流程可能是： 先输入手头上的所有信息，然后等到有了其他字段所必需的信息后，回过头再填进去。当然， 我们仍想要用户注意到有必填字段的信息缺失，但可以通过丰富的无模态反馈
    （rich modeless feedback) 告诉用户，而不是停止一切工作，只为了用户能知道一些他们可能已经意识到的 问题。</p>

<p align="right" height="6pt" width="0pt">以采购员向系统中输入发票为例。采购员以此为生，使用该程序已有数千小时。他对屏幕
    情况有第六感，所以想要知道自己是否输入了不良数据。如果程序用巧妙的视觉和听觉线索通</p>

<blockquote>
    263
</blockquote>
<p>About Face 4 :交互设</p>

<p>知他数据输入错误，就能实现最高效率。</p>

<p>程序还应该帮助用户校验，数据条目必须输入有效，如零件号码不会输入进自由文本区域， 而可通过提前键入（ type-ahead)( 自动完成）字段或者下拉菜单等有界控件输入。地址和手机
    号应该更加自然地输入到能够解析数据的智能文本字段中。程序应该提供不唐突的无模态来反 馈录入员的工作状态。这会让他自我控制输入，最终减少程序的监督工作。</p>

<p>多数信息处理系统都能容忍信息缺失。缺失的名字、代码、数字或价格几乎总能通过记 录中的其他数据重构出来，实在不行也总能询问交易涉及的各方来重构。虽然这样做成本很高，
    但没有生产力降低或者技术支持中心的成本高。即便缺失信息，信息处理系统也应该能够运行。 构建系统的部分开发者或许不喜欢处理缺失数据所需做的额外工作，所以把数据完整性当成
    不可破坏的法则。结果，无数工作人员必须遵循着防止数据库崩溃的指示，与呆板专横的软 件交互。</p>

<p>显然，只为了保护少数几个笨蛋，就把全体工作人员当笨蛋对待，这只会降低所有人的生 产力；疏于调整快速、昂贵、易产生错误的人员；降低士气，使想干好的工作人员无意之中犯 更多错误，最终自己都认为自己的信息工作不可靠。</p>

<p>数据输入员的老套角色正在迅速消失：坐在锅炉房一样的地方，埋头在一堆纸张中，不用 动脑，机械地用键盘穿孔机干活，周围是一群一模一样的录入员，做着一模一样的活儿。数据
    输入的任务不再是量产式的工作，而更多是一种生产力工作，这种工作由睿智、能干的专家执 行；而随着电子商务的普及，数据输入则直接由客户完成了。换言之，与数据输入软件交互的
    人们越来越不能容忍被当作胸无大志、没有文化、愚钝的苦力。用户不能容忍愚蠢的软件羞辱 他们，尤其是如今他们点一个按钮，在网上逛几秒就能找到另一款软件，而这款软件的供应商
    展示的界面是尊重用户的。在这种情况下，用户就更不可能忍受软件的羞辱了。</p>

<p><span id="filepos0001413348"></span></p>

<p>数据输入和规避机制</p>

<p>如果一套系统太刻板，就不能模拟现实世界的行为。如果一套系统拒绝接受用户的现实情 况，即便最终结果是所有字段都有效也毫无用处。数据库重要还是系统试图支持的业务重要？ 管理数据库的人、创建了数据输入程序来给数据库供应数据的人，往往只是为
    CPU 服务。这是 一种重大的利益冲突，只有优秀的交互设计师才能帮忙解决。</p>

<p>在计算机系统中建立规避机制很困难，因为这需要一个更强大的界面。录入员不能将一个 文档移到队列顶部，除非队列、文档，以及文档在队列中的位置都显而易见。将电子文档从一
    堆电子文档中取出，放到最上面必须要有这样的工具，且功能清晰。规避机制还需要确保保存 暂停的记录，撤销工具也有类似的需求。更重要的是规避可能会滥用的情况。</p>

<p align="right" height="0pt" width="0pt">第 14 章重新思考数据输入、存储与检索</p>

<p>避免滥用的最佳策略是用计算机记录用户的动作，以供日后检查（如果有恰当理由的话)。 这一策略很简单：让用户做他们想做的，但用计算机详细记录下这些动作，这样可以完整地追 查责任并可恢复。</p>

<p><span id="filepos0001415182"></span></p>

<p>审核与编辑</p>

<p>许多开发者认为，如果用户在输入数据时犯错误，就有责任通知他们。如果应用程序犯错 了，一个程序就有责任通知其他程序，但这条规则并非必然可以扩展到用户身上。用户永远是
    正确的，所以应用程序必须接受用户告诉它的任何内容，不管它知道什么、不知道什么。这与 数据免疫的概念类似，因为不管用户输入什么，都应该接受，不管程序认为输入的数据错得多 离谱。</p>

<p>这并不意味着程序可以袖手旁观，说： “ 好吧，他不想要救生设备，那就让他淹死。”仅仅 因为程序必须假装用户始终是正确的，并不意味着用户实际上总是正确的。人类常常犯错，你
    的用户也不例外。用户出错可能不是程序的故障，但程序有责任。程序又如何修正错误呢？</p>

<blockquote>
    心设计原则
</blockquote>
<blockquote>
    出错可能不是程序的问题，但是程序的责任。
</blockquote>
<p>应用程序可以提供警告 —— 只要它们不会愚蠢地停止活动即可。但是如果用户选择做一些 可疑的事，程序能做的只有接受事实，努力使用户避免伤害，就像一个忠实的向导，必须跟随 其客户走进丛林，确保携带必备的绳索和足够的水。</p>

<p>警告应该清楚且无模式地告知用户它们做了什么，就像里程表安静地报告超速一样。不过 , 程序停止运行就没有道理了，就像开车超过时速 65 英里时，里程表就切断燃油一样没道理。例
    如，输入字段可以不弹出错误对话框，而是把程序经过计算以后认为可能错误的用户输入数据</p>

<p>高亮显不。</p>

<p>如果用户做了一些程序认为不正确的事情，保护用户的最佳方法（除非灾难立刻降临）就 是清楚地指出来可能有问题。程序要以不唐突的方式告知用户，最终依靠用户自己的能力解决
    问题。如果程序跳出来，尝试修正问题，或许就会犯错，扭曲用户意图。此外，这么做未能让 用户从中获益，还会使用户未来继续犯错。不过，程序应该记住用户的每个动作，保证每个动
    作能够明确地撤销，不会损失关联信息，让用户弄清楚程序认为问题出在哪里。实质上，就是 要为用户的动作保留一份清晰的审核轨迹。因此就有了这条原则： “ 审核，不要编辑”。</p>

<p align="right" height="4em" width="0pt">265<br/>
    <br/></p>

<p>About Face 4 : 交互设计精 U</p>

<blockquote>
    於设计原则
</blockquote>
<blockquote>
    审核，不要编辑。
</blockquote>
<p>微软的 Word 有一个审核的绝佳例子，当然也有令人厌恶的范例。这个绝佳的例子是实时 拼写检查。用户在输入时，红色波浪下画线标出程序无法识别的文字，如图 14-1 所示。在文字
    上单击右键，就弹出相近单词菜单供选择。但用户不用改变任何东西，没有被对话框或者其他 的愚蠢模态形式所打扰。</p>

<p><font size="1">ood design has the feeling of a unified whole, in which all parts are in balar re poorly 0</font></p>

<blockquote align="right">
    <font size="2"><i>i</i></font> designed, or not designed at all. often look and feel like they are ( ieces
    haphazardly knit together. Often this is the result of implementation <font size="2"><i>n</i></font> <font size="1">without
    * each other.</font>
</blockquote>
<blockquote>
    &nbsp;
</blockquote>
<blockquote>
    Ignore Spelling Learn Spelling
</blockquote>
<blockquote>
    Look Up "developmant" Search with Google
</blockquote>
<blockquote>
    Cut
</blockquote>
<blockquote>
    Copy
</blockquote>
<blockquote>
    Paste
</blockquote>
<blockquote>
    Spelling and Grammar
</blockquote>
<blockquote>
    Substitutions
</blockquote>
<blockquote>
    <img align="baseline" alt="" height="13" src="../Images/Image00006.jpg" width="30"/>
</blockquote>
<blockquote>
    Transformations Speech
</blockquote>
<blockquote>
    <img align="baseline" alt="" height="13" src="../Images/Image00285.jpg" width="39"/>
</blockquote>
<blockquote>
    Paragraph Direction Save To Pocket Inspect Element Search With Coogle Add to (Tunes as a Spoken Track Open as
    Twitter Username
</blockquote>
<blockquote>
    <font size="2">图</font> 14-1 <font size="2">微软</font> Word <font size="2">中的自动拼写检查会审核拼写错误的单词，用红色波浪下画线为用户提供无模式的反馈。右击带下
    画线的单词，打开备选单词表，可以从中选出正确的单词。</font>
</blockquote>
<p>另一方面， Word 的 “ 自动更正 ” （ AutoCorrect) 功能一开始有点烦人。在你打字时 ，Word 悄悄地将其认为拼写错误的单词改正过来。这个功能在更正轻微的拼写错误时难以置信的有用。
    不过，更正没有留下明显的审核轨迹，所以用户往往不知道输入的内容已经更改。如果 Word 能够提供某种标记来指出它已经做了更正就更好了，以免错误地更正内容（例如，如果你正在
    撰写一篇科技论文，有大量专业术语和首字母缩写词，这种可能性就更高了）。</p>

<p>但是，更恼人的是微软的 “ 自动格式化 ” （ Aut 〇 F 〇 rmat) 功能。该功能试图解释用户的行为， 如在文本中使用星号和数字，自动地格式化编号列表或其他段落格式。该功能起作用时，看起
    来就像魔法。但程序经常做错，一旦执行了自动格式化，并不总是有直观的方式来撤销该动作。</p>

<p>266<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 14 章重新思考数据输入、存储与检索</p>

<p>自动格式化有点聪明过头：应该留给人去思考。幸运的是，该功能可以关闭， Word 在原位置提 供了浮动菜单（ in-place menu), 允许用户打幵或关闭自动格式化。</p>

<p>在现实世界中，人们总是填写一部分或者填写得不正确，比如做个笔记，以后再改正，这 是经常做的事。如果忘记改正，最终发现问题时依然会改正遗漏。即便从未改正问题，也活得
    下去。用程序提高数据收集的效率当然合情合理，很多情况下这也符合人们收集数据的目标（谁 也不想给一笔昂贵的在线购物输入错误的送货地址）。不过，程序可以设计得更符合人类思考事
    物的方式。数据完整性的技术目标不应该是丢给用户去解决的问题。</p>

<p><span id="filepos0001428784"></span></p>

<p><font size="6">重新思考数据存储</font></p>

<p>人们在经验中发现，文件系统 —— 在磁盘上存储程序和数据文件的机制一 • 很难使用、难 以理解。文件系统是计算机的关键组成部分，出了差错后果严重。多数人不清楚内存和永久存
    储的区别。不幸的是，我们设计的软件历来强迫用户（甚至你母亲）知道二者的区别，用计算 机构造的方式来思考文档。</p>

<p>Web 应用和其他基于数据库的软件流行，让我们有很好的机会抛弃这种计算机文件系统的 实现模型思维。如前所述，谷歌在这方面带头，基于云的网络应用能够自动存储，免去了用户 的担忧和困惑。</p>

<p>iOS 之类的移动操作系统试图解决这种存储问题，把文件与创建该文件的应用紧密地关联 起来。要使用文档，就必须打开创建文档的应用，才能访问文档。文档自动保存，在应用内检 索 <font size="2">。一</font>
    旦适应了这种以应用为中心的范式，事情就简单多了——除非需要用其他应用程序来处 理该文档。 iOS 只对少数几种文档类型打破这种密切关联，例如照片，这时就又回到了在一组 容器中寻找所需内容的情形。</p>

<p><span id="filepos0001430667"></span></p>

<p align="right" height="1em" width="0pt">数据存储的问题</p>

<p>如你所料，这种交互问题的根源是实现模型。从技术上讲，每一个运行的应用程序其实同 时存在于两个地方：内存和磁盘上（或者移动设备的闪存）。每个打开的文档也是如此。目前而
    言，这是必需的状态。现有技术有不同的机制来响应式地访问数据（动态随机存储器）和存储 数据供未来使用（磁盘、闪存）。不过，多数人并不是这么思考的。大多数人的心理模型（除了
    开发者）认为，我们直接创建和修改的只是单一文档。不幸的是，多数软件呈现给我们的数据 存储实现模型让人迷惑。</p>

<p align="right" height="2em" width="0pt">267</p>

<p>保存更改</p>

<p>出现如图 14-2 所示的 “ 保存更改 ” 对话框时，用户忍住一股恐惧和迷惑，习惯性地点击“保 存 ” 按钮。如果一个对话框总是得到相同的回答，那就是冗余的，应该消灭掉。</p>

<p><font size="5">赢</font></p>

<p><font size="2">是否将更改保存到</font> <font size="2">]234.doc</font> <font size="2">中？</font></p>

<p><font size="2"><u>丨</u></font> <font size="2"><u>—</u></font> <font size="2"><u>保</u></font> <font size="2"><u>#
    1</u></font> <font size="2">I</font> <font size="2">.</font> <font size="2"><u>取消</u></font> <font size="2"><u>1</u></font>
</p>

<p><font size="2">图</font> 14-2 <font size="2">在编辑之后关闭文档时，</font> Word <font
        size="2">会问这个问题^这个对话框是程序员将文件系统的实现模型强加到倒霉用户身</font></p>

<p><font size="2">上的结果。该对话框的出现会让新手感到十分意外，他们常常不小心选择</font> <font size="2">“</font> <font size="2">不保存</font> <font
        size="2">”</font> <font size="2">按钮。</font></p>

<p>用户请求关闭或者退出时，程序就启动 “ 保存更改 ” 对话框，因为这时程序要消除内存版 本和磁盘版本之间的差异。但多数情况下，询问用户完全没有必要：默认 “ 是 ” 即可。</p>

<p>“ 保存更改 ” 对话框基于一个糟糕的假设 : 即保存和不保存是概率相同的行为。即便单击 “ 是 ” 按钮的频率比 “ 否 ” 高出好几个数量级，对话框仍然给予这两个选项同样的权重。正如第 11
    章所讨论的，这种情况是混淆了可能性和概率。用户有可能偶尔会说 “ 不保存”，但用户几乎总 是会说 “ 保存 ” 。这种情况下妈妈会想： “ 如果我不想保留这些更改，为什么关掉文档时还要留 着它们呢？ ”
    对她来说，这个问题太荒谬了。</p>

<p>在现实中，很多程序不需要关注文档或者文件管理。苹果的 iPhoto 和 iTimes 软件都提供了 丰富易用的功能，使一般用户可以忽略文件存在。在 iTunes 中，可以创建、修改、共享播放列 表，可以传到 iPod
    中保存多年，尽管用户从未明确地保存文件。类似地，在 iPhoto 中，图像文 件从数码相机导出到程序中，可以组织、展示、用邮件发送、打印，用户从不需要考虑文件系 统。运行 iOS 和 Android
    的设备基本已经消灭了明确保存的概念。</p>

<p>关闭文档但不保存</p>

<p>如果你使用计算机的时间相当长，就会本能地认为，假如修改文档时出了错，或者只是随 手摆弄一下，则 “ 关闭 ” 功能是放弃不想要更改的恰当方式。这种观点不对。拒绝更改的时机 是在更改时。甚至有个成熟的习惯用法来支持这一点： “ 撤销 ”
    功能。这里缺失的是如何不使用 “ 关闭文档但不保存 ” 功能，执行会话级别的撤销（如 “ 还原 ” 功能，只有 Adobe Photoshop 之 类的少数软件支持该功能）。</p>

<p>有经验的用户还学会了使用 “ 保存更改 ” 对话框达到类似的目的。由于多数文档很难大规 模撤销更改，因此人们（错）用 “ 保存更改 ” 对话框选择 “ 不保存 ” 来达到目的。如果发现自</p>

<p align="right" height="0pt" width="0pt">第 14 章重新思考数据输入、存储与检索</p>

<p>己对错误的文件做了大量修改，就使用对话框当作逃生阀，返回初始状态。这很方便但不合理 : 如前所述，还能发现更多途径来解决这个问题。</p>

<p>另存为</p>

<p>首次保存某个文档，或从 “ 文件 ” 菜单中选择了 “ 另存为 ” 命令时，很多程序接着显示“另 存为 ” 对话框，如图 14-3 所示。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00174.jpg"/></p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font size="2">图</font> <font size="2">14-3 “</font> <font size="2">另存为</font> <font
        size="2">”</font> <font size="2">对话框提供了两个功能：命名文件和把文件放在你选择的文件夹中。不过，用户没有清晰的保存概
    念，所以对话框的标题与这些功能的心理模型不匹配。此外，如果对话框允许你命名和保存文件，你可能会期望它允许 你重新命名和替换文件。不幸的是，我们的期望被糟糕的设计搞乱了。</font></p>

<p><br/>
    <br/></p>

<p>从功能上说，这个对话框提供了两个功能：让用户命名文件；选择存放文件的目录。这两 个功能都要求用户熟悉文件系统，并且要有相当的远见为日后检索文件做好准备。用户必须知
    道如何规划一个可以接受、容易记忆的文件名，理解层级文件目录。很多用户擅长起名字，但 放弃了理解目录树。他们把文档放在桌面上，或者放在程序默认选择的目录中。偶尔，一些动
    作导致程序忘记了默认目录，这些用户就必须呼叫专家来查找文件了。</p>

<p>“ 另存为 ” 对话框需要确定其真实意图是什么。如果是命名和保存文件，那么它的工作就干 得很糟糕。用户首次命名和保存文件之后，不创建一份新文档就无法更改文件名或者存放的目 录，至少用 “ 另存为 ” 对话框不行，但 “ 另存为 ”
    却声称提供了重命名和移动位置的功能。而 程序中的其他工具也做不到。实际上，在 Wind 〇 wS7 中用 “ 另存为 ” 可以重命名其他文件，但 不能重命名当前正在使用的文件。嗯？新手就不走运了，但有经验的用户经过一番艰难学习，
    知道可以关闭文档，打开 Windows 资源管理器，重命名文件，返回程序，在 “ 文件”菜单中调</p>

<p align="right" height="1em" width="0pt">269</p>

<p>About Face 4 :交互设计精髓</p>

<p>用 “ 打开 ” 对话框，重新打开该文档。</p>

<p>强迫用户在资源管理器中重新命名文档并不很困难，但这里有一个隐藏的陷阱。诱饵是， Windows 可以轻易支持多个程序同时运行。用户被这个特性所吸引，试图在资源管理器中重新
    命名文件，却没有首先关闭应用程序中的文档。这个非常合理的操作触发了陷阱，铁钳子狠狠 地夹住了他的腿。用户被如图 14-4 所示的粗暴对话框断然拒绝。试图重命名一个打开的文档是
    共享冲突，操作系统弹出一个高高在上的错误信息，拒绝了这一操作。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00076.jpg"/></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> <font size="2">14-4</font> <font size="2">如果用户企图使用资源管理器重新命名一个文件，而</font> <font
        size="2">Word</font> <font size="2">仍然在编辑该文件，资源管理器就蠢得没法克服这 个问题，竖起这条高高在上的错误信息，这也太粗暴。新用户被编辑程序和操作系统同时断然拒绝，可能得出结论，文
    档不能重命名。</font>
</blockquote>
<p>无辜的使用者只不过想重新命名其文档而已，却发现自己迷失在操作系统晦涩难懂的知识 中。讽刺的是，有权威且有责任在运行时改变文档名的程序，连尝试一下都不干。</p>

<p>存档</p>

<p>没有明确的功能用来为一份文档创建副本或者存档。用户必须使用 “ 另存为”对话框才能 做到，而这么做很容易造成混舌 L 。如果用户已经把文件保存为 “Alpha” ，就必须明确地调用“另 存为 ” 对话框，更改文件名。关闭 Alpha
    ，放到磁盘上，而新 Alpha 还打开着的，等待编辑。 从单一文档的角度来看，这一动作几乎毫无意义，还会给用户带来恶心的陷阱。</p>

<p>下面这个看似非常合理的场景会带来麻烦：假设用户编辑了 Alpha 文档 20 分钟，现在为了 可以对原始文档做些重大但实验性的更改，得在磁盘上复制一份存档。用户调用了 “ 另存为”命 令，把文件更名为了 “ 新的 Alpha”
    。程序把 Alpha 放到磁盘上，让用户继续编辑 “ 新的 Alpha ”。 但 Alpha 从未被保存，所以写到磁盘上的文档没有过去 20 分钟所做的任何更改！这些更改只存在 于 “ 新的 Alpha”
    副本中，而这个副本正放在内存中，也正在程序中打开着。用户开始剪切粘贴“新 的 Alpha” ，相信自己的心血己经备份到 Alpha 中，但实际上用户正在更改这份信息的唯一副本。</p>

<p>所有人都知道，可以使用锤子来敲螺丝或用钳子砸钉子；但任何技艺娴熟的工匠都知道 ,</p>

<p>用的工具不对，最终会带来麻烦，要么工具坏了，要么活儿干砸了。 “ 另存为”对话框是复制或 者管理副本的错误工具，最后用户不得不自己收拾残局。</p>

<p align="right" height="1em" width="0pt">用统一文件模型修复数据存储</p>

<p>设计合理的软件应该始终把文档当作一件事来处理，而不是磁盘或内存中的一个副本。在 这样的 “ 统一文件模型 ”（unified file model) 中，用户永远不用被迫面对计算机的内部机制。
    对在磁盘和内存之间写数据的管理是文件系统的工作。</p>

<p>多数应用的文件管理都有一套既有的标准套件，包括打开、保存、关闭命令，以及相关的 另存为、保存更改和打开对话框。正如我们前面讨论的，这些对话框整体上对于一些任务来说
    非常令人困惑，而对于某些其他的任务则完全无法胜任。接下来的几节将要讨论的是文档管理 的另一种方法，可以更好地支持大多数使用者的心理模型。用户可能需要针对文档执行几项目 标导向的任务，每一项都有自己对应的功能：</p>

<p>• 自动保存。</p>

<p>• 创建副本。</p>

<p>• 命名和重命名。</p>

<p>• 在文件系统中存放和移动文档。</p>

<p>• 指定文档的格式。</p>

<p>• 还原所做更改。</p>

<p>• 放弃所有更改。</p>

<p>• 生成一个版本。</p>

<p>• 沟通状态。</p>

<p>自动保存</p>

<p>每个计算机用户都必须学习的重要功能之一是如何保存文档。调用该功能意味着接受对计 算机内存中的版本所做的任何改变，并写到文档的硬盘版本中。在统一模型中，我们废除了所
    有让用户辨识这两个版本的界面，这样保存功能完全从主流界面中消失。但是这并不意味着保 存功能从程序中消失了，保存仍是一个必要的操作。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p><img align="baseline" alt="" height="73" src="../Images/Image00250.jpg" width="54"/></p>

<p>设计原则</p>

<p align="right" height="8pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    自动保存文档和设置</p>

<p><br/>
    <br/></p>

<p align="right" height="1em" width="0pt">程序应该自动保存文档。如果新用户处理完了文档，请求关闭功能，程序应该直接把更改</p>

<p align="right" height="2em" width="0pt">271</p>

<p>About Face 4 :交互设计精髓</p>

<p>写到磁盘上，不必停下来弹出 “ 保存更改 ” 对话框，询问是否确认保存。</p>

<p>在一个完美的世界里，这就足够了，但是计算机和软件会崩溃，电源可能会断掉，其他不 可预测的灾难性事件会凑到一起，抹掉你的工作。如果保存之前断电了，包含文档的内存就会
    混乱，导致更改丢失。磁盘上的原始数据没有什么问题，但数个小时的工作就泡汤了。为了防 止发生这些情况，程序应该在用户与计算机交互期间定期保存文档。理想的情况下，只要用户
    做出修改（换句话说，每次按键之后），程序就立刻保存。对于大多数程序来说，这是可行的。 另一种方法是在内存中追踪小幅改动，经过一定的时间间隔就写到磁盘中。</p>

<p>重要的是，自动保存功能不能影响用户界面的响应。保存要么应该是后台进程，要么在用 户与程序停止交互时执行。没有人会连续输入。每个人都会停下来整理思路，或者翻一页，或
    者喝一口咖啡。程序所需要做的是等待，直到用户有几秒停止了敲键盘，这时就保存。</p>

<p>自动保存对大多数人来说都足够了。不过，长时间使用电脑的人时刻担心崩溃和数据丢失， 每输完一段就习惯性地按 Ctrl+S ，有时一句话按一次。供这些用户使用的程序应该有手动保存 控件，但不应该要求用户调用手动保存。</p>

<p>创建副本</p>

<p>应该有一个功能明确叫作 “ 创建副本 ” 。副本应该和原始文档一模一样，但不应该与原始文 档捆绑在一起。也就是说，对原始文档的后继修改不会影响到其副本。名为 “Alpha ”文档的副 本应该自动被赋予一个标准形式的名字，比如
    “Alpha 副本 ” 。如果名为 “Alpha 副本”的文档 已经存在，则新的副本应该命名为 “Alpha 副本 2” 。副本应该和原始文档放在一个目录下，还 要在文件名后面加上时间戳或者日期戳。</p>

<p>尽管设想一个对话框来完成该命令很诱人，但不应该打断用户。程序应该悄悄、有效并聪 明地采取行动，不应该用 “ 你确定你要创建副本？ ” 这样愚蠢的对话框来打扰用户。如果出现 异常，程序应该自行做出权威的建设性决定。</p>

<p>命名和重命名文档</p>

<p>在多数应用程序中，首次保存一个文档时，可以为文件命名。但几乎没有程序让你重命名 这个文件。当然，可以 “ 另存为 ” 另一个名字，但这只是用新名字创建了另一个文件，旧文件 还是用旧名字，纹丝未动。</p>

<p>文档的名字应该显示在应用程序的标题栏上。如果用户决定重新命名文档，可以单击标题 栏，直接在标题栏编辑。还有什么比这更简单、更直接的？ OSX 上的 OmniGmffle 是少数几款 支持以这种方式重命名的程序之一（参见图 14-5
    )。</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00072.jpg"/></p>

<p>在文件系统中存放和定位文档</p>

<p>第 14 章重新思考数据输入、存储与检索</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00072.jpg"/></p>

<p><font size="2">图</font> <font size="6">14-5 OS X</font> <font size="2">上的</font> <font size="6">OmniGraffle</font>
    <font size="2">支持重命名。在文档窗口的标题栏点击文件名就会弹出窗口，既可以重命名也可以移</font></p>

<p><font size="2">动文件。</font></p>

<p><img align="baseline" alt="" height="70" src="../Images/Image00234.jpg" width="54"/></p>

<p>人们使用程序编辑一个文档时，文档已经存在。打开文档比新建文档的频率高很多。这就 意味着，文档在文件系统的位置已经确定。尽管在创建或者保存文档的那一刻，我们考虑的是
    建立主目录，但这些事件在实现模型之外都没多大意义。新文件应该放在合理的地方，方便用 户再次找到（例如桌面）。</p>

<p>设计原则</p>

<p>把文件放在用户能找到的地方。</p>

<p>这个特定的合理存放位置应该取决于用户以及所设计的产品的姿态。对于现在大多数人曰 常使用的复杂的独占式应用，有时应该定义一个针对这个应用的文档存放位置。但是对于暂时
    式应用或者使用不太频繁的独占式应用来说，则不要把用户的文件藏在你自己文件系统中设定 的特殊角落。</p>

<p>如果用户想把文档保存在其他位置，可以从菜单中调用这个功能。这时弹出 “ 移动”对话 框，并且突出显示当前的文档。在这个对话框中，用户能够将文档移动到任何位置。程序自动
    地将文件移放到该位置，这个对话框仅仅用于把文件移动到其他位置。</p>

<blockquote>
    273<br/>
    <br/>
</blockquote>
</blockquote>
</body>
</html>
